vue组件间的全选改变小选状态,小选改变全选状态如何实现

项目场景：vue组件间的全选改变小选状态,小选改变全选状态的实现

项目场景：整个项目是一个table表格,子组件(tr)中包含小选框,父组件(table)中包含全选框,点击全选改变小选框的状态,点击小选改变全选框的状态

---

解决方案：

子组件中选择框 v-model绑定父组件传过去的状态

<tr>
    <td>
        <input type="checkbox" v-model="obj.checked">
    </td>
 <tr>

父组件中传递选中的状态 全选状态绑定一个计算属性的值

 <th>
    <input type="checkbox" v-model="isall" /> 
    <span>全选</span>
</th>
<tbody>
	//因为table标签只能包含tr标签 所以使用is来挂载不同的组件
   <tr  is="Car" v-for="(item, index) in goodList" :index="index" :checked="item.checked"></tr>
</tbody>

父组件计算属性内的写法

//计算属性
  computed: {
    //是否选中
    isall: {
    //赋值
      set(val) {
      //将数组中所有选择框的状态改成与 全选框状态一样
        this.goodList.forEach(obj => obj.checked = val)
      },
      //取值
      get() {
      //.every用法 遍历数组 如果后边的条件有一个不成立,则立即返回false
        return this.goodList.every(obj => obj.checked === true)
      }
    }
  },