Javascript 为什么我的两个单独的Vue组件会覆盖彼此的数据？ 用例

给定以下vue组件：

{{title}}


{{label}}


从“vue类组件”导入组件；
从“Vue”导入Vue；
@组成部分({
道具：{
标签：{
类型：数组，
},
标题：{
类型：字符串，
},
},
观察：{
检查：[
{
处理程序：“updateParent”，
},
],
},
})
导出默认类复选框列表扩展Vue{
选中=[]；
updateParent（）{
此.$emit（“更新”，此.选中）；
}
}

组件将呈现从父级接收的

标签

道具的复选框列表

当在同一页面中使用两个组件时，使用

v-if

切换如下：

显示编号清单
展示信件清单
选中字母：{{checkedLetters}
已检查号码：{{checkedNumbers}
从“Vue”导入Vue；
从“/components/HelloWorld”导入HelloWorld；
从“/CheckboxList.vue”导入复选框列表；
从“vue类组件”导入组件；
@组成部分({
组成部分：{
复选框列表，
},
})
导出默认类应用程序扩展Vue{
数字=[1,2,3,4,5]；
字母=[“a”、“b”、“c”、“d”]；
state=“数字”；
checkedLetters=[]；
checkedNumber=[]；
}

这将创建以下UI：

为什么在两个组件之间切换（使用

v-if

）并选中复选框时，数据会混淆，从而导致以下行为？

---

这里可以找到一个完整的工作示例：

作为Vues内部优化的一部分，它将努力在其指令中重用组件（例如

v-if

或

v-for

）作为默认行为

这一点记录在他们的报告中

不幸的是，VUE将默认为什么，考虑添加一个具有独特值的<代码>键 PROP，以便强制VUE将它们视为单独的组件：

v-if=“state==”number“
title=“数字”
：labels=“数字”
@update=“checkedNumbers=$event”
v-if=“state==”字母”
title=“信件”
：labels=“字母”
@update=“checkedLetters=$event”

请注意，在一次渲染组件时不需要此选项-无条件切换或循环：