Vue——抽离组件

建一个settingZwh.vue文件（子组件）

编写HTML代码 

<template>
    <div>
      <img :src="picture" width="2%"/>
      <span>{{showButton}}</span>
      <van-switch size="24px" class="switchSwitch" v-if!="showButton"/>
    </div>
</template>

编写JS代码 

<script>
export default {
  //props： 接收父组件传来的值
  props: {         
    'picture':{default:require('../../public/settings/时间.png')},
    // default：默认值，如果父组件没有传值，则使用默认值
    'Title': { default: "跳转" },
    'showButton':{default:true},

  }
</script>

建一个zwh.vue文件（父组件）

编写HTML代码 

<template>
  <div>
    <settingzwh v-for="(item,index) in settingDataList "
    :key="index"
    :picture=item.settingLogo
    :Title=item.allColumnsTitle
    :showButton=item.isTure
    ></settingzwh>
  </div>
</template>

// :picture →绑定值，给子组件传值

编写JS代码  

<script>
import settingzwh from "../../components/settingzwh";
// 引用子组件地址
import {settingData} from "../../Entity/settingDataEntity";
// 我写了js文件引入数据，所以是js文件地址

export default {
  components: { settingzwh }, // 使用子组件
  data() {
    return {
      settingDataList: settingData // 从js文件暴露出来的接口，获取数据
    };
  }
};
</script>

写一个js文件，相当于后台传过来的数据

const settingData = [
{
    'settingLogo': require('../../public/settings/学习.png'),
    'allColumnsTitle': '学习数量',
    'settingTextName': ['20', '30', '50', '100', '自定义'],
    'unit': '个',
    'arrowIcon': require('../../public/settings/右.png')
},
{
    'settingLogo': require('../../public/settings/播放次数.png'),
    'allColumnsTitle': '播放次数',
    'settingTextName': ['1', '2', '3', '5', '10', '自定义'],
    'unit': '次',
    'arrowIcon': require('../../public/settings/右.png')
},
{
    'settingLogo': require('../../public/settings/时间.png'),
    'allColumnsTitle': '播放间隔',
    'settingTextName': ['1', '2', '3', '4', '5', '自定义'],
    'unit': '秒',
    'arrowIcon': require('../../public/settings/右.png')
},
{
    'settingLogo': require('../../public/settings/停留时间.png'),
    'allColumnsTitle': '大图停留时间',
    'settingTextName': ['3', '5', '10', '15', '自定义'],
    'unit': '秒',
    'arrowIcon': require('../../public/settings/右.png')
}
]

export {
    settingData
    // 暴露给外部调用
}