父组件给5个子组件传值，同时子组件和父组件的相关值对应改变。参考checkbox单选和全选。
知识点：
1、子组件给父组件回传id
2、子组件监听父组件值的改变
3、父组件尽量不要给子组件传递对象和数组
代码如下，
父组件：app.vue：
<template>
<div class="testCon">
<div>
<onetest v-for = "childMsg in checkCon"
:childCheck = "childMsg.checkSingle"
:childText = "childMsg.text"
:key ="childMsg.id"
:id="childMsg.id"
@changeState="state">
</onetest>
</div>
<input type="checkbox" @change="checkAll" v-model="isCheckedAll" />全选
</div>
</template>
<script>
import onetest from '../../../components/testOne'
export default {
name: "test",
data() {
return {
checkCon: [
{id: '1',
checkSingle: false,
text: '我是一'
},
{
id:'2',
checkSingle: false,
text: '我是二'
},
{
id:'3',
checkSingle: false,
text: '我是三'
},
{
id:'4',
checkSingle: false,
text: '我是四'
},
{
id:'5',
checkSingle: false,
text: '我是五'
}
],
isCheckedAll:false,
}
}
,
components:{
onetest,
},
methods:{
checkAll(val) {
this.checkCon.forEach((elem,key)=>{
elem.checkSingle = this.isCheckedAll
})
},
state(value,id){
this.checkCon.forEach((elem,key)=>{
if(elem.id==id){
elem.checkSingle = value
}
})
let childCheck = this.checkCon.every((elem,index)=>{
if(elem.checkSingle){
return true;
}
})
if(childCheck){
this.isCheckedAll = true;
}else{
this.isCheckedAll = false;
}
}
}
}
</script>
<style scoped>
.testCon {
padding-left: 100px;
}
</style>
子组件：testOne.vue
<template>
<div>
<input type="checkbox"
v-model="checkChild"
:label = "childText"
@change = "childChange"
/>{{childText}} {{checkChild}}
</div>
</template>
<script>
export default {
name: "oneTest",
props:['childCheck','childText',"id"],
data(){
return {
checkChild : this.childCheck
}
},
methods:{
childChange(){
this.$emit('changeState',this.checkChild,this.id)
}
},
watch:{
childCheck(n,o){
this.checkChild = n
}
}
}
</script>
<style scoped>
</style>