Javascript 在Vue3中，如何使自定义组件与一组复选框的v-model一起工作？

下面给出的代码您可以看到

v-model

的魔力，选中/取消选中复选框后，数组

checkedNames

将自动添加/删除名称。我们不必编写任何东西来从数组中推送/切片/筛选名称，对吗

const{ref}=Vue；
常量应用={
设置（）{
常量checkedNames=ref（[]）
返回{checkedNames}
}
}
Vue.createApp（App.mount（“#App”）

杰克
约翰
迈克


选中的名称：{{checkedNames}
根本不需要
addorremovietem（）
方法。只需让
复选框的默认Vue
v-model
逻辑执行繁重的操作。您唯一需要的是为
v型
使用
computed
prop（因为无法直接使用prop，因为prop不能从子组件中变异）


const{
裁判，
createApp
}=Vue；
const app=createApp({
设置（）{
const itemsSelected=ref（[]）；
常数项=ref([{
id:'1'，
名字：“杰克”
},
{
id:'2'，
名字：“约翰”
},
{
id:'3'，
名字：“迈克”
},
]);
返回{
项目，
所选项目，
};
},
});
应用程序组件（'自定义复选框'{
道具：{
项目：{
类型：对象，
默认值：（）=>（{}）
},
模型值：{
类型：数组，
必填项：true
}
},
发射：['update:modelValue']，
计算：{
型号：{
得到（）{
返回此.modelValue
},
设置（值）{
此.$emit（'update:modelValue'，value）
}
}
},
模板：`
{{item.name}
`
})
应用程序安装（“应用程序”）

itemselected:{{itemselected}}

我建议您阅读本教程。使用v型模型的想法非常棒。结果也很棒。代码也会减少（我们不需要一个函数来处理子组件中的值）@leonheess不，这对我没有帮助，bcoz，它也在做同样的事情。你建议的链接有一个答案，我的问题从这里开始：）@Syed如果它对你没有帮助，你为什么投票以你的/这个的重复来结束这个问题？@MichalLevý但是第二个和第三个不会打任何人，因为他们没有发表任何评论。@MichalLevý我被提醒注意这个问题，因为提问者试图关闭另一个问题，作为这个问题的重复。如果他自己认为这两个问题是相互重复的，那么我反对谁呢？我只是翻了一遍，因为另一个问题更受欢迎，也更老。如果你能向我解释任何超越Vue 2和Vue 3的区别，我将很高兴投票重新开放自己。如果没有，我建议你把答案转移到另一个问题上。