Javascript Can'；t修改Vue中插槽对象的顶级数据

如果运行此演示并单击“在子项中修改”，则文本将更新。但如果您单击“通过插槽修改顶层”，则它不会得到更新，在单击它之后，单击另一个按钮将不再工作

如何更新插槽的顶级属性？例如，布尔值或字符串。直接在孩子身上做是行得通的，但我不能通过缝隙来做

如果子数据包含一个对象，我可以通过插槽修改该数据对象的子属性（请参阅编辑之前的问题的原始版本，以演示该问题），但我不能修改顶级属性

const Child={
模板：`
{{object}}
小孩
`,
数据（）{
返回{
对象：{
字符串：“首字母”
}
}
},
方法：{
单击（）{
this.object.string=“在子对象中修改”
}
}
}
新Vue({
组成部分：{
小孩
},
模板：`
通过插槽修改顶层
`,
方法：{
单击（插槽）{
slot.string=“通过插槽更新顶层”
}
}
}).$mount（“#应用程序”）

---

至于为什么您会看到这种行为，即您不能修改根对象，但可以修改其下的属性，公开的slot变量是一个浅克隆，因此顶级引用与子组件中的对象引用不同。我添加了一个console.log并将

.string

包装到一个对象中以显示它。单击

子项

，然后单击

修改

按钮

因此，看起来您正试图将子组件的状态公开给父组件，这样您就可以从父组件进入并改变子组件的状态。这通常不是您应该使用Vue的方式。其思想是状态应该在树中向上移动，确定性的道具通过组件树向下传播

在子组件上直接引用和改变状态是一种反模式。这是为了鼓励设计具有确定性行为的组件，并保持组件的解耦（以保持它们的独立性和可重用性）。还有一些性能优势

这家伙解释得很好：
Vue和React基于类似的概念

const Child={
模板：`
{{object}}
小孩
`,
数据（）{
返回{
对象：{
字符串：{x:“首字母”}
}
}
},
方法：{
单击（）{
window.ChildObjectReference=this.object；
this.object.string.x=“在子对象中修改”
}
}
}
新Vue({
组成部分：{
小孩
},
模板：`
通过插槽修改顶层
`,
方法：{
单击（插槽）{
log（`slot:`，slot，`\nobject=`，window.ChildObjectReference，
`\nslot！==引用为对象：`，插槽===window.ChildObjectReference，
`\nslot.string==ref object.string:`，slot.string==window.ChildObjectReference.string）
}
}
}).$mount（“#应用程序”）

---

至于为什么您会看到这种行为，即您不能修改根对象，但可以修改其下的属性，公开的slot变量是一个浅克隆，因此顶级引用与子组件中的对象引用不同。我添加了一个console.log并将

.string

包装到一个对象中以显示它。单击

子项

，然后单击

修改

按钮

因此，看起来您正试图将子组件的状态公开给父组件，这样您就可以从父组件进入并改变子组件的状态。这通常不是您应该使用Vue的方式。其思想是状态应该在树中向上移动，确定性的道具通过组件树向下传播

在子组件上直接引用和改变状态是一种反模式。这是为了鼓励设计具有确定性行为的组件，并保持组件的解耦（以保持它们的独立性和可重用性）。还有一些性能优势

这家伙解释得很好：
Vue和React基于类似的概念

const Child={
模板：`
{{object}}
小孩
`,
数据（）{
返回{
对象：{
字符串：{x:“首字母”}
}
}
},
方法：{
单击（）{
window.ChildObjectReference=this.object；
this.object.string.x=“在子对象中修改”
}
}
}
新Vue({
组成部分：{
小孩
},
模板：`
通过插槽修改顶层
`,
方法：{
单击（插槽）{
log（`slot:`，slot，`\nobject=`，window.ChildObjectReference，
`\nslot！==引用为对象：`，插槽===window.ChildObjectReference，
`\nslot.string==ref object.string:`，slot.string==window.ChildObjectReference.string）
}
}
}).$mount（“#应用程序”）

这是故意的。我的问题是如何修改插槽对象的顶级数据。我不确定“插槽对象的顶级数据”是什么意思。我可能还是误解了你的意图。slot本质上是与子组件中的prop的绑定，通常以允许从模板绑定到子组件中的slot的方式进行关联。顶级是指直接位于

slot

对象下的属性。例如

slot.property

而不是

slot.sub.property

。第一个不起作用，但第二个在更新时起作用。好的，这里有两个问题。其一是新的房地产增值