Vue2中自定义复选框组件使用v-model的最佳实现方式

你的实现思路完全可行，符合Vue2自定义v-model的设计规范，多选场景用数组存储选中值、子组件不直接修改prop而是抛出新状态的做法也避开了单向数据流的常见坑，核心逻辑没有问题，只是有几个细节可以优化，让组件兼容性、健壮性更好。

• 自定义model配置正确：Vue2默认v-model绑定的prop为value、监听事件为input，你将其修改为绑定checked数组、触发check事件，避免和组件本身接收的单选项value prop命名冲突，逻辑清晰。
• 状态更新符合单向数据流要求：子组件没有直接修改传入的checked数组，每次交互都生成新数组抛给父组件更新，不会触发Vue的prop修改警告，状态变更链路可追溯。

1. 删除Vue3专属语法
   你代码里写的emits: ["check"]是Vue3的选项，Vue2（包括2.7版本）不会识别这个字段，虽然写了不会直接报错，但属于无效代码，兼容低版本Vue2时直接删除即可。

2. 补全prop校验和默认值
   当前代码没有给checked prop设置默认值，如果父组件初始化时没有传值、或者传了非数组类型（比如null），模板里的checked.includes(value)会直接抛出includes is not a function的运行时错误，给prop加类型校验和默认值可以避免这个问题。

3. 处理重复值边界
   当前勾选逻辑直接用[...checked, value]追加值，如果因为异常逻辑导致同一个value已经存在于数组中，会出现重复项，追加前先判断值是否已存在，能避免这类脏数据问题。

4. 抽离内联逻辑
   把模板里写在@change上的内联处理逻辑抽成组件方法，可读性更高，后续加扩展逻辑（比如自定义禁用态、变更前拦截）也更方便。

5. 补全列表key
   父组件里的v-for循环没有绑定:key，不符合Vue列表渲染的最佳实践，加上唯一key可以避免渲染复用导致的异常。

CheckBox.vue #

<script>
export default {
    model: {
        prop: "checked",
        event: "check"
    },
    props: {
        name: {
            type: [String, Number],
            required: true
        },
        label: {
            type: [String, Number],
            default: ''
        },
        value: {
            required: true
        },
        checked: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        handleChange(e) {
            const isChecked = e.target.checked
            let newChecked
            if (isChecked) {
                // 已存在该值时直接返回副本，避免重复添加
                newChecked = this.checked.includes(this.value)
                    ? [...this.checked]
                    : [...this.checked, this.value]
            } else {
                newChecked = this.checked.filter(val => val !== this.value)
            }
            this.$emit('check', newChecked)
        }
    }
};
</script>

<template>
    <label :for="`input-${name}`">
        {{ label }}
        <input
            :id="`input-${name}`"
            :value="value"
            type="checkbox"
            :checked="checked.includes(value)"
            @change="handleChange"
        />
    </label>
</template>

父组件使用 #

<script>
import CheckBox from "../atoms/checkbox.vue";

export default {
    data: () => ({
        elements: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        checked: [],
    }),
    watch: {
        checked(newSelected) {
            console.log(newSelected);
        }
    },
    components: {
        CheckBox
    }
}
</script>

<template>
    <ul>
        <li v-for="num in elements" :key="num">
            <CheckBox :name="num" :label="num" :value="num" v-model="checked" />
        </li>
    </ul>
</template>

如果后续需要支持对象类型的选中值，当前的全等判断（includes、!==）会失效，可以给组件加一个valueKey prop，用来指定对象对比的唯一字段（比如id），修改判断逻辑即可适配；如果需要和原生表单行为对齐，也可以扩展true-value、false-value、disabled等常用prop，覆盖更多使用场景。

内容的提问来源于stack exchange，提问作者Sohail Saha