Vue.js：与 DOM 下的组件通信答案

【问题标题】：Vue.js: Communicate with components that are down the DOMVue.js：与 DOM 下的组件通信
【发布时间】：2017-10-05 17:03:15
【问题描述】：

我只是在试用 Vue.js，我正在努力解决在 DOM 中上下传递信息从一个组件到另一个组件的关键概念。

考虑这个例子，其中容器切换按钮应该切换容器内的所有组件，或者说，将它们全部设置为“true”或“false”。

<div id="app">
  <p>
    <strong>Welcome!</strong>
    Click the "true/false" buttons to toggle them. 
    Click the "Toggle all" button to toggle them all!
  </p>

  <app-toggle-container>
    <app-toggle></app-toggle>
    <app-toggle></app-toggle>
  </app-toggle-container>

  <app-toggle-container>
    <app-toggle></app-toggle>
    <app-toggle></app-toggle>
    <app-toggle></app-toggle>
  </app-toggle-container>
</div>

在这个代码笔中，我将app-toggle 和app-toggle-container 定义为组件：https://codepen.io/fiedl/pen/mmqLMN?editors=1010

但我找不到将信息从容器传递到单独的切换开关的好方法。

另外，在第二步中，当尝试相反的方式时，例如，如果所有切换为真，则“全部切换”按钮仅显示“真”，或者当所有切换为假时显示“假” ，我找不到将切换当前状态的信息传递给容器的方法。

这似乎不是一个罕见的问题。在 Vue.js 中执行此操作的正确方法是什么？还是我想错了？

很快，我找到了$broadcast 和$dispatch。但由于它们在 Vue.js 2 中被删除，我很可能以错误的方式思考它:)

【问题讨论】：

标签： javascript vuejs2

【解决方案1】：

我叉了你的笔http://codepen.io/nicooga/pen/wdPXvJ。

原来 Vue 组件有一个 $children 属性，其中包含您的子组件 [控制器]。你可以遍历它们并用它们做一些事情。

this.$children.forEach(c => c.toggle());

见

【讨论】：

这很好用，非常感谢！反过来，this.$parent.someMethod() 也可以！