{{checked}} <cmsChecked :data="formData" v-model="checked">..."/>

vue中如何把子组件中值传给父组件

85次阅读

共计 734 个字符,预计需要花费 2 分钟才能阅读完成。

本来项目用饿了么框架写的,但是有个组件需要自己去实现,于是就写了如下的代码

  • 父组件
<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 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:" 红玫瑰 "
        }
    ]
}

但是现在写出来之后,子组件的值一直传不到父组件中,现象就是无论怎么选中,父组件的 check 始终为空。很是苦恼。

后来终于发现,原来是因为父组件中没有接受 $emit 传来的值,犯了低级的错误,作如下修改

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

接着把 val 值赋给 checked:[] 即可

正文完
 0