在vue3中，手写父子关联，勾选子级父级关联，取消只取消当前子级，父节点不动

在Vue 3中，可以通过组合式 API (Composition API) 实现父子关联的勾选功能，并且在取消勾选子级时，父级的勾选状态不应该被影响。以下是实现这一功能的示例代码：

<template>
  <div>
    <div>
      <input type="checkbox" @change="toggleParentCheckbox" :checked="isParentChecked">
      父级
    </div>
    <div v-for="(child, index) in children" :key="index">
      <input type="checkbox" @change="toggleChildCheckbox(index, $event)" :checked="isChildChecked(index)">
      子级 {{ index + 1 }}
    </div>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const children = ref([true, true]); // 初始化子级状态数组
    const isParentChecked = ref(false); // 父级勾选状态
 
    // 切换父级勾选状态
    function toggleParentCheckbox(event) {
      isParentChecked.value = event.target.checked;
      children.value = children.value.map(() => event.target.checked);
    }
 
    // 切换子级勾选状态
    function toggleChildCheckbox(index, event) {
      children.value = children.value.map((checked, i) => i === index ? event.target.checked : checked);
      // 更新父级勾选状态（如果所有子级都勾选，则勾选父级；否则，取消父级勾选）
      isParentChecked.value = children.value.every(Boolean);
    }
 
    // 检查子级是否勾选
    function isChildChecked(index) {
      return children.value[index] || false;
    }
 
    return {
      children,
      isParentChecked,
      toggleParentCheckbox,
      toggleChildCheckbox,
      isChildChecked
    };
  }
};
</script>

在这个示例中，我们使用了ref函数来定义响应式数据，包括子级的勾选状态数组children和父级勾选状态isParentChecked。toggleParentCheckbox函数用于切换父级勾选状态，并将新状态应用于所有子级。toggleChildCheckbox函数用于切换单个子级勾选状态，并根据所有子级的状态更新父级勾选状态。isChildChecked函数用于检查给定索引位置的子级是否被勾选。