本来是用饿了么框架的,但框架没有这个组件,于是自己写了个,但发现了传值不了的问题(可能是我写的不好吧 ~.~ )
父组件:
<template>
<div style="margin:50px">
{{checked}}
<cmsChecked :data="formData" v-model="checked"></cmsChecked>
</div>
</template>
---------------------------
return {
checked:[],
formData:[
{
id:1,
label:"蜘蛛"
},
{
id:2,
label:"蝙蝠"
},
{
id:3,
label:"红玫瑰"
}
]
}
子组件:
<template>
<div>
<span
v-for="(item,index) in data"
:key="index"
class="cms-checked"
@click="selectData(item.id)"
:class="{active:selectId.indexOf(item.id)>=0?true:false}">
{{item.label}}
<img src="./icon/checked.png" class="icon" v-if="selectId.indexOf(item.id)>=0?true:false">
</span>
</div>
</template>
--------------------------
props:["data","value"],
data () {
return {
n:null,
selectId:[]
}
},
watch:{
selectId(val){
console.log(val);
this.$emit("value",val);
}
},
methods:{
selectData(id){
if(this.selectId.indexOf(id) >= 0){
let n = this.selectId.indexOf(id);
this.selectId.splice(n,1);
}
else{
this.selectId.push(id);
}
}
},
无论怎么选中,父组件的checked始终为空
因为你父组件中没有接收$emit传过来的值。
然后将val的值赋给checked:[],即可。