孩子与孩子的交流答案

【问题标题】：Children to children communication孩子与孩子的交流
【发布时间】：2017-01-25 14:49:10
【问题描述】：

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

我有带有子组件的发票组件，例如“subtotal”、“vat_subtotal”、“total”（这是示例）。我正在使用 v-ref 从发票组件直接访问每个孩子。此外，小计是根据发票属性计算的，然后 vat_subtotal 是从小计子属性计算的。 'total' 是从 vat_subtotal 子项中计算出来的。

例子：

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

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

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

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

虽然可以访问父链中的任何实例，但您应该避免直接依赖子组件中的父数据，而更喜欢使用 props 显式向下传递数据。此外，从子组件改变父状态是一个非常糟糕的主意，因为：

它使父子紧密耦合；

当单独看它时，它使父状态更难以推理，因为它的状态可能被任何孩子修改！理想情况下，应该只允许组件本身修改自己的状态。

一般来说，您的目标应该是创建一个表示应用程序状态的模型。不要直接访问父母/孩子，而是使用道具将任何相关数据传递给孩子。孩子可以使用events 通知他们的父母有关更改，或者您可以使用.sync 绑定来自动同步模型。

我认为您会从阅读有关 Vue 应用程序架构的更结构化方法中受益。我会从Flux-inspired Application Architecture for Vue.js.开始

【讨论】：

第一个要点：它们紧密耦合。它是带有小计的发票。但我明白了。最糟糕的部分是我必须描述父组件中的每个道具，然后在每个孩子中做同样的事情（ofc 只有那个孩子才需要）。我使用 vuejs 是因为我想少写 :)) 谢谢你的参考，我会检查它。
@KarolisTička 另一方面，引用它们更简单：vat_subtotal.total 而不是 @$parent.$refs.vat_subtotal.total
您可以将对象作为props传递，在其中可以收集您需要传递下来的所有数据属性。
好吧，反正流程很奇怪。所以children只是为了模板和重用？如果父实例上不存在该数据，我不能在那里存储任何道具/数据？如果我想计算子组件中的一些道具，我必须在父实例上定义这些道具/属性并传递给子组件并同步它们？这是重复的代码。好吧，归根结底，我有两个选择，将所有内容保留在父级（巨大的模型）中，或者仅在父级上定义数据属性，但在子级上同步和计算它们。
是否将原始对象或一组属性传递给子级并不重要。重要的是孩子不需要知道它的父母 api。假设您有一个带有两个道具的人员编辑器组件：名字和姓氏。碰巧父母需要显示全名。编辑器组件仅编辑名字和姓氏。 Parent 定义计算属性 fullName。通过这种方式，您可以在多个父级中重用您的编辑器，而不仅仅是具有 fullName 属性的那些....

【解决方案2】：

不要向孩子索取数据。如果父级需要访问（在您的情况下，授予另一个子级的访问权限），则应在父级中创建数据项并作为 prop 传递给子级。这就是如何在多个孩子之间共享数据的方式。子组件不应依赖于通过父组件可用的其他子组件（或者实际上，如果它不是作为 prop 传入的，则依赖于父组件中的任何东西）。

如果子组件负责改变prop的值，可以pass it using .sync。

【讨论】：

有很多属性，这就是为什么我想将它们拆分为子组件。但我明白了。谢谢。