0

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

我有带有子组件的发票组件，例如“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 仍然是“未定义”（我不知道为什么. 当我后来改变形式时，它会正常反应并重新计算一切正确）。看起来，一个孩子正在尝试计算属性，而其他孩子尚未加载。

4

2 回答 2

3

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

如果子组件负责更改prop值，则可以使用.sync.

于 2016-09-17T14:00:57.193 回答
2

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

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

  1. 它使父子紧密耦合；

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

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

我认为你会从阅读更多关于 Vue 应用程序架构的结构化方法中受益。我将从受Flux 启发的 Vue.js 应用程序架构开始。

于 2016-09-17T14:18:23.833 回答