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

image.png

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

父组件:

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

阅读 2.4k
1 个回答

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题