Vue中如何通过头部复选框控制多个动态生成的子复选框全选全消

第一步：改造自定义CheckBox组件，支持父组件双向绑定 #

原组件状态完全内部维护，父组件无法直接控制，需要调整为支持v-model的标准表单组件：

<template>
    <div class="checkbox">
        <input 
            class="checkbox-input" 
            name="input" 
            type="checkbox" 
            :checked="value"
            @change="$emit('input', $event.target.checked)"
        >
    </div>
</template>
  
<script>
export default {
    // 接收父组件v-model绑定的选中状态
    props: {
        value: {
            type: Boolean,
            default: false
        }
    }
};
</script>

第二步：调整父组件逻辑，管理全选和子项选中状态 #

父组件模板修改 #

<div class="card">
    <div class="card-header">
        <!-- 头部全选框绑定全选状态，变化时触发全选逻辑 -->
        <CheckBox v-model="isCheckAll" @change="handleCheckAll" />
    </div>
    <div class="card-body" v-for="item in cart" :key="item.product.id">
        <div class="checkbox-area">
            <!-- 子复选框绑定对应item的选中状态，变化时更新全选状态 -->
            <CheckBox v-model="item.checked" @change="handleItemCheck" />
        </div>
    </div>
</div>

父组件逻辑补充 #

export default {
    data() {
        return {
            isCheckAll: false, // 全选状态标识
            cart: [] // 购物车数据，每个item默认添加checked: false属性
        }
    },
    methods: {
        // 全选切换逻辑
        handleCheckAll(isChecked) {
            this.cart.forEach(item => {
                item.checked = isChecked
            })
        },
        // 子项选中变化时同步全选状态
        handleItemCheck() {
            // 所有子项都选中时，全选自动勾选，否则取消
            this.isCheckAll = this.cart.length > 0 && this.cart.every(item => item.checked)
        },
        // 动态新增购物车项的方法，需要同步新增项的选中状态
        addCartItem(newItem) {
            this.cart.push({
                ...newItem,
                checked: this.isCheckAll // 全选开启时，新增项默认选中
            })
        }
    }
}

逻辑说明 #

• 子组件通过props接收父组件的选中状态，通过$emit通知父组件状态变更，符合Vue自定义表单组件的双向绑定规范
• 全选状态变化时遍历所有子项，批量更新选中状态
• 任意子项选中状态变化时，通过every判断所有子项是否全部选中，自动同步全选框状态
• 动态新增子项时同步当前全选状态，避免新增项和全选状态不一致的问题

内容的提问来源于stack exchange，提问作者magic bean