关于element-ui 多个el-checkbox-group做为子组件时 如何完成与父组件的通信呢
发布于 7 年前 作者 SkyLin0909 6189 次浏览 最后一次编辑是 7 年前 来自 问答
粉丝福利 : 关注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>

clipboard.png

子组件这边还剩下一个功能没有完成,即勾选只能改变newcheckList,我特意去翻了下源码checkbox.vue有一个change函数,来触发父组件el-checkbox-group的功能,我这里还需要再讲数据更新到最外层的父组件。 是否只能再我的子组件中,自己写一个模版,再@onchange方法想父组件通信了?

clipboard.png

clipboard.png

于是我有这样的想法我的Foodselect,也就是el-checkbox-group的父组件去监听这个@input,但是失败了。所以特来请求关于这个问题的解决办法

回到顶部