elementUI el-checkbox勾选后逻辑取消勾选，点击后参数传递和显示不一致的异常错误

el-checkbox勾选后逻辑取消勾选，点击后参数传递和显示不一致的异常错误

问题描述： 父组件传递数据给子组件，用来控制el-checkbox的勾选，勾选后传递参数给父组件进行逻辑处理，比如某种条件下需要取消勾选，讲数据修改后再次点击勾选，发现传递过来的勾选的数据和当前勾选状态不一致，虽然勾选框没有勾选，但是传递的数据是一直在进行勾选的操作。

解决方法：在勾选change的事件中用this.$nextTick。

例子：

如果没用用nextTick，点击两次，勾选被阻止，但参数传递还是照常的

父组件代码

<template>
  <div>
    {{ msg }}1234
    <TestList :dataList="dataList" @updateList="updateList"></TestList>
  </div>
</template>
<script>
export default {
  name: "Test1Page1",
  data() {
    return {
      msg: "Test1 page list:",
      dataList: [
        { key: "t1", checked: true, title: "t1" },
        { key: "t2", checked: false, title: "t2" },
        { key: "t3", checked: false, title: "t3" },
      ],
    };
  },
  components: {
    TestList: () => import("@/components/Test1/TestList.vue"),
  },
  methods: {
    updateList(val, index, item) {
      console.log("父组件更新：", val, index, item.checked);
      // 当第一条数据勾选时，不能勾选其他数据
      if (this.dataList[0].checked) {
        //   this.dataList[index].checked = false;
        this.$set(this.dataList[index], "checked", false);
        console.log("父组件更新2：this.dataList", this.dataList[index].checked);
      }
    },
  },
};
</script>

子组件TestList代码

<template>
    <div>
        <div v-if="dataList && dataList.length > 0">
            <div v-for="(item,index) in dataList" :key="item.key">
                name: {{item.name}} '|' index: {{index}} '|' 
                <el-checkbox
                    @change="val => changeChecked(val,index,item)"
                    v-model="item.checked"
                >
                </el-checkbox>
                
            </div>
        </div>
    </div>

</template>

<script>
export default {
    name: 'TestList',
    data() {
        return {
            test1: 'test1',
        }
    },
    props: {
        dataList: {
            type: Array,
            default: [],
        },
    },
    methods: {
        changeChecked(val,index,item) {
            console.log('list勾选改变',val,index,item.checked)
            this.$nextTick(() => {
                this.$emit('updateList',val,index,item)
            })
        }
    }

}
</script>

关键在于子组件的change事件里面的 this.$nextTick，使用后就数据传递正常了。