将 vue.js 组件子中的对象或值发送到父通信

Posted 2023-02-23

【中文标题】将 vue.js 组件子中的对象或值发送到父通信

【英文标题】：Emitting object or value in vue.js component child to parent communication

【发布时间】：2019-07-27 16:36:15

【问题描述】：

我想知道在 vue 组件中向父级发送数据的更好方法。从父母到孩子我传递prop 对象，但从孩子到父母$emit。我应该传递对象还是值？例如： product 或 product.id，我还必须在事件侦听器上重用 product 中的一些数据，例如 product.price。我应该使用什么？发出一个对象或仅发出一个值，然后在侦听器函数中循环和条件？

【问题讨论】：

我建议您显示一些相关代码并描述预期结果。 “哪种方式更好”不是一个明确的问题，尽管熟悉架构的人可能会提出一些建议

【参考方案1】：

这在通过引用传递的情况下不起作用。我的意思是它有效，但 Vue 尖叫着不要直接改变道具......

movie 是一个对象，genres 是一个数组。子组件道具和事件

道具： 流派： 类型：数组， 默认 （） 返回 []

...

this.$emit('changeGenreList', this.genres)

我必须用 slice() 制作这个数组的本地副本，然后我发出这个副本。

【参考方案2】：

只需在此处使用双向同步：

@product.sync="product"

在孩子身上：

this.$emit('update:product', product)

每当您对产品的属性进行更改时。