关于element-ui 多个el-checkbox-group做为子组件时 如何完成与父组件的通信呢
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
el-checkbox-group中的v-model是接收父组件传来的一个一位数组,通过计算属性返回this.checkList,进行渲染,那么如何在更改之后如何什么地方触发父组件中的监听事件呢?
//父组件
...
<template v-for="item in nameArray">
<el-form-item :label="item.label">
<v-food-select :checkList="$data.form[item.id]"
:cooktype="item.id"
@updateList="updateList">
</v-food-select>
</el-form-item>
</template>
...
<script>
import vFoodSelect from '../../components/FoodSelect'
export default{
data () {
return {
form: {
morningList: [],
lunchList: [],
dinnerList: [],
snackList: []
},
nameArray:[
{label: '早餐:', id: 'morningList'},
{label: '午餐:', id: 'lunchList'},
{label: '晚餐:', id: 'dinnerList'},
{label: '加餐:', id: 'snackList'}
]
}
},
methods: {
updateList(foodname, id) {
let index = this.form[id].indexOf(foodname)
this.form[id].splice(index,1)
}
}
}
</script>
父组件通过ajax拿到对应方案的数据,并又一个监听数据更新的函数。
//子组件
<template>
...
<el-checkbox-group v-model="newcheckList>
<template v-for="item in items">
<el-checkbox :label="item.name" :name="item.cat_name"></el-checkbox>
</template>
</el-checkbox-group>
<el-checkbox-group>
<template v-for="item in newcheckList">
<div class="delete-group">
<span>{{ item }}</span>
<button @click="handleEdit($event)"></button>
</div>
</template>
</el-checkbox-group>
</template>
...
<script>
props: {
checkList: Array,
cooktype: String
},
computed: {
newcheckList() {
return this.checkList
}
},
methods: {
handleEdit (event) {
let el = event.currentTarget
let foodname = $(el).prev().text()
this.$emit('updateList', foodname, this.cooktype)
},
}
</script>
子组件这边还剩下一个功能没有完成,即勾选只能改变newcheckList,我特意去翻了下源码checkbox.vue有一个change函数,来触发父组件el-checkbox-group的功能,我这里还需要再讲数据更新到最外层的父组件。 是否只能再我的子组件中,自己写一个模版,再@onchange方法想父组件通信了?
于是我有这样的想法我的Foodselect,也就是el-checkbox-group的父组件去监听这个@input,但是失败了。所以特来请求关于这个问题的解决办法