将数据传递到Vue.js链中的解决方案真的是链接事件监听器/发射器吗？

Question

Vue API文档/指南讨论了父母将道具传递给儿童的模式，他们通过事件与父母交流。此外，该指南强调儿童绝对不应该改变父数据​​，因为这是父母的责任。

对于一个大多数平坦的结构，你有一个父母（例如'App'），所有组件都是那个父母的孩子，这个工作正常;任何事件只需泡一次。

但是，如果您正在编写一个划分区域的结构（例如App（保持状态） - ＆gt; ActiveComponent - ＆gt; FormGroup - ＆gt;输入...），那么在更深层部分内构建交互（如FormGroup / Inputs） ）要求在每个连接上建立一个事件链。输入需要制作一个事件v-on:keyup.enter="addInputValue";然后FormGroup需要v-on:addInputValue="bubbleInputValue"; ActiveComponent需要v-on:bubbleInputValue="bubbleInputValue";最后，应用程序需要回复bubbleInputValue。

链接中的每个链接都需要知道如何负责处理从App最深的分支Input想知道的事件的冒泡，这似乎真的很荒谬。 Vue指南提出了一个State Store模式来处理这个 - 但这实际上并没有解决链接（因为你只是添加一个不同的根; Store）。

是否有一个公认的约定/模式来解决穿越高大的组件树的通信难度？

Answer 1

如果您真的希望将状态保持在app级别，可以使用non parent child communication

以下是：

var bus = new Vue()
----------------------------
// in component A's method
bus.$emit('id-selected', 1)
----------------------------
// in component B's created hook
bus.$on('id-selected', function (id) {
  // ...
})

但正如documentation中所述：

  

在更复杂的情况下，您应该考虑使用专用的state-management pattern。

Vuex救援

正如评论中所建议的，community集中管理状态的一般做法是vuex，所以你的所有州都与你的组件和视图分开，你有改变商店的行为，它反应性地改变了你的观点。流程看起来像这样：