子组件CkeckboxCommon.vue
<template> <input type="checkbox" class="checkbox" @change="checkboxToggle" :checked='value' /> </template> <script> export default { name:'Checkbox', props: { value:{ type:Boolean, default:false } }, methods:{ checkboxToggle(){ this.$emit('input',!this.value) this.$emit('change') } } } </script> <style> </style>
父组件购物车Car.vue
1.data里面先定义两个变量,一个是定义总的checkbox,一个是定义列表的checkbox
data () { return {
checkboxtotal:false,
checkboxarray:[]
}
},
2.给列表checkbox数组定义初始全不选
checkboxtheArray(){
this.checkboxarray = this.car.map(() => false);
},
this.cart定义的是所有数据的一个数组
3.现在 总的checkbox和列表的checkbox的初始化都已经完成
4.给总的checkbox和列表的checkbox的分别添加事件
4.1.总的checkbox添加checkboxTotal事件
<checkbox-common @change="checkboxTotal" v-model='checkboxtotal'>商品</checkbox-common>
4.2.checkboxTotal事件的js代码
checkboxTotal(){
this.checkboxarray.fill(this.checkboxtotal)
}
全选选中,列表的checkbox都选中
全选没有选中,列表的checkbox都没有选中
4.3.列表的checkbox添加onCheckChanged事件
<li class="lineone">
<checkbox-common @change="checkboxArray" v-model='checkboxarray[carindex]'></checkbox-common>
<img :src="caritem.cover" alt="" width="100" height="100">
<span>{{caritem.text}}</span>
</li>
4.4.onCheckChanged事件的js代码
checkboxArray(){
this.checkboxarray.every(item => item) && (this.checkboxtotal = true) // 列表的checkbox都全部全选后,总的checkbox也全选
this.checkboxarray.some(item => !item) && (this.checkboxtotal = false) // 列表的checkbox都全部都没有选中,总的checkbox没有选中
},
5.最后在mounted钩子函数运行checkboxtheArray函数
mounted(){ this.$nextTick(function(){this.checkboxtheArray(); }) },
效果图例展示: