Javascript 选中/取消选中vue 3中父div中包装的复选框

我是vue新手，正在尝试创建一个简单的复选框组件。当我的代码只是组件中的输入元素时，它就可以工作，但是如果我将其放置在父div中，则不会发生任何事情，如下所示。任何帮助都将不胜感激

Checkbox.vue（复选框组件）

选项标签

导出默认值{
发射：[“更新：已选中”]，
道具：{
检查：{
类型：[数组，布尔值]，
默认值：false，
},
大型：{
类型：[布尔]，
默认值：false，
},
价值：{
默认值：null，
},
},
计算：{
proxyChecked：{
得到（）{
返回此文件。已检查；
},
设置（val）{
此.$emit（“更新：选中”，val）；
},
},
类别（）{
返回this.large？“自定义控件自定义控件lg自定义复选框”：“自定义控件自定义复选框”
}
},
}

Index.vue（我使用组件的位置）

---

提前谢谢你。

我注意到了几件事。-您确定

表单。请记住
包含值吗？-当FormCheckBox组件中只需要一个v模型时，为什么要使用命名的v模型因为现在我看到FormCheckBox组件包含prop
值
以及
选中的
prop？同样的道理也适用于
<template>
    <div :class="classes">
        <input type="checkbox" :value="value" v-model="proxyChecked" class="custom-control-input">
        <label class="custom-control-label" for="customCheck1">Option Label</label>
    </div>
</template>

<script>
export default {
    emits: ['update:checked'],

    props: {
        checked: {
            type: [Array, Boolean],
            default: false,
        },
        large: {
            type: [Boolean],
            default: false,
        },
        value: {
            default: null,
        },
    },

    computed: {
        proxyChecked: {
            get() {
                return this.checked;
            },

            set(val) {
                this.$emit("update:checked", val);
            },
        },

        classes() {
            return this.large ? 'custom-control custom-control-lg custom-checkbox' : 'custom-control custom-checkbox'
        }
    },
}
</script>

<div class="form-group">
   <form-check-box name="remember" v-model:checked="form.remember" />
</div>