如何用v-model从父组件传值给子组件？

Question

我定义了一个组件，这个组件结构大概是
我定义的组件<-el-check-box<-checkbox(input)
我的部分代码
我定义的组件

<todo-check-box
   :radioState="NoteDeleteList[index]"
   @radioInput="NoteDeleteList[index] = $event"
   v-show="isCancel"
   @endPost="NoteInsert(i,$event)"
></todo-check-box>

<el-checkbox
  class="pl-note-checkbox"
  @change="start"
  :value="radioState"
></el-checkbox>

<todo-check-box> 内部代码

props: {
 radioState: {
   type: Boolean,
   default: false
 }
},
...
start(state) {
  this.$emit('radioInput',state);
  this.taskState = state;
  if(this.timeOutEvent == 0 && this.isChange == false) {
    this.isChange = true;
    this.timeOutEvent = setTimeout(() => {
      console.log(this.taskState);
      this.timeOutEvent = 0;
      this.isChange = false;
      this.$emit("endPost",this.taskState);
    },60000);
  }
  else {
    return;
}

NoteDeleteList[index] 是一个 Boolean
但我发现虽然<todo-check-box>有值，但<el-check-box>是没有值的
后来我的解决方案
在<el-checkbox>中去定义一个props属性（radioState）并将这个值绑定到<el-checkbox>的value，当值改变的时候在让父组件改变NoteDeleteList[index]（绑定<el-checkbox>的值）
事实上，我的NoteDeleteList[index]的确在一次点击后成功改变了，但是我的radioState却迟迟没有改变
一直到我的endPost触发了，它才改变，这是为啥？明明我的endPost事件和NoteDeleteList[index]一点关系都没有
完整两个组件的代码
https://github.com/pandoralin...
https://github.com/pandoralin...

Answer 1

首先，我对props连续传递和传递数组对象理解不是很深，但是我能肯定你这个用法肯定是不好的，props首先就应该避免被子组件修改，而你将radioState这个props还直接传递给了子组件的子组件作为其参数，更进一步增加了复杂度。而且这样跑肯定会报Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.错误的，因为孙子组件el-checkbox修改了它，但是你居然没有报错，我拿你的代码去跑了遍，确实没报错，一开始我也百思不得其解，然后我才发现。。。
你el-checkbox的参数弄错了！！是v-model="radioState"，不是:value="radioState"，错上加错反而隐藏了真正的隐患，也是很离谱了。
一般这种情况，你应当在子组件的data里把radioState赋值给一个局部变量,比如data() { return { tempState: this.radioState }; } ，再放到el-checkbox的v-model里面，剩下就好办了