1.先在components下创建一个新的vue文件,添加一些基本的配置。
2.在父组件中引用这个新创建的vue并注册
import SelectItem from "./SelectItem"
export default{
components:{SelectItem}
}
3.在子组件div里定义一个class名,并添加一个click事件,此事件是申请修改父组件值的程序;并给此事件定义一个方法
<div class="select-item" @click="changeTitle(0)">
</div>
methods: {
changeTitle(index) {
this.$emit("update", index);
}
}
4.在子组件中申明变量类型,并在父组件中去调用
props: {
xinming: {
type: String,
default: "bbb"
},
<select-item :activeIndex.sync="activeIndex"
xinming="yrr"
shanchang="abc" >
</select-item>
5.可用v-for循环进行优化,在父组件中添加要传入的值,效果跟第四部一样。
data() {
return {
userList: [
{
name: "Rekkles",
age:12
weizhi: "adc"
},
<select-item v-for="user in userList" :activeIndex.sync="activeIndex" :xinming="user.name"
:shanchang="user.weizhi"
:age="user.age"
:key="index">
</select-item>