vue子组件传值不到父组件中去

Question

本来是用饿了么框架的，但框架没有这个组件，于是自己写了个，但发现了传值不了的问题（可能是我写的不好吧 ~.~ ）

父组件：

<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始终为空

Answer 1

因为你父组件中没有接收$emit传过来的值。

  <cmsChecked @value="value" :data="formData" v-model="checked"></cmsChecked>
  methods:{
  value(val){
     console.log(val)
  }
  }

然后将val的值赋给checked:[],即可。