Question

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

我的发票组件包含子项组件，例如＆＃39; subtotal＆＃39;，＆＃39; vat_subtotal＆＃39;，＆＃39; total＆＃39; （这是一个例子）。我使用v-ref直接访问发票组件中的每个孩子。此外，小计是根据发票属性计算的，然后vat_subtotal是从小计子属性计算的。并且＆＃39;总计＆＃39;是从vat_subtotal孩子计算的。

示例：

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

问题是我在页面加载时收到警告，导致“总计”错误。孩子们正试图访问＆＃39; vat_total＆＃39;儿童属性，但@ $ parent。$ refs.vat_total仍未定义＆＃39; （我不知道为什么。当我后来改变形式的东西时，它会做出正常反应并重新计算一切正确）。似乎有一个孩子正试图计算属性，而其他孩子还没有加载。

Answer 1

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

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

Answer 2

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

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



它使父母和孩子紧密耦合;



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

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

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

开头

儿童与儿童的沟通

2 个答案: