在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函数用于检查给定索引位置的子级是否被勾选。