Children 至 children 通信

Question

我的组件很大，所以我给你简单的例子，也许有人会知道如何解决我的问题。

我有包含 children 组件的发票组件，例如 'subtotal'、'vat_subtotal'、'total'（这是示例）。我正在使用 v-ref 直接访问发票组件中的每个 child。此外，小计是根据发票属性计算的，然后 vat_subtotal 是根据小计 children 属性计算的。而'total'是由vat_subtotalchildren计算出来的。

示例：

invoice.$refs.subtotal.total = {some calculations}
vat_subtotal.total = @$parent.$refs.subtotal.total * 1.21
total.total = @$parent.$refs.vat_subtotal.total

问题是我在加载页面时收到警告，因为 'total' children 正在尝试访问 'vat_total' children 属性，但是 @ $parent.$refs.vat_total 仍然是 'undefined'（我不知道为什么。当我稍后改变形式时，它反应正常并重新计算一切正确）。看起来，一个 children 正在尝试计算属性，而另一个 children 尚未加载。

Answer 1

不要进入 child 获取数据。如果 parent 需要访问权限（在您的情况下，要授予另一个 child 访问权限），则应在 parent 中创建数据项并作为 prop 传递给child。这就是数据可以在多个 children 之间共享的方式。 Child 组件不应依赖于通过 parent 可用的其他 child 组件（或 parent 中的任何内容，真的，如果它不是作为 prop).

如果 child 组件负责更改 prop 值，您可以 pass it using .sync.

Answer 2

您尝试解决问题的方式在技术上是可行的，但非常不鼓励。如 docs 中所述：

Although it’s possible to access any instance in the parent chain, you should avoid directly relying on parent data in a child component and prefer passing data down explicitly using props. In addition, it is a very bad idea to mutate parent state from a child component, because:

It makes the parent and child tightly coupled;

It makes the parent state much harder to reason about when looking at it alone, because its state may be modified by any child! Ideally, only a component itself should be allowed to modify its own state.

一般来说，您的目标应该是创建一个表示应用程序状态的模型。不要直接访问 parents / children，而是使用 props 将任何相关数据向下传递给 children。 Children 可以使用 events, or you can use .sync 绑定自动同步模型，通知他们的 parent 有关更改。

我认为阅读有关 Vue 应用程序架构的更结构化方法会有所帮助。我将从 Flux-inspired Application Architecture for Vue.js.

开始

Children 至 children 通信

Children to children communication

vue.js

vue-component