vue.js - 另一个router-view的组件调用方法/Vue.js

Question

我有两个 <router-view/> s:主要和侧边栏。它们每个都带有一个组件(EditorMain.vue 和 EditorSidebar.vue)。

EditorMain 有一个方法 exportData() .我想在单击按钮时从 EditorSidebar 调用此方法。

什么是解决它的好方法？

• 我确实使用 vuex，但我不想让这些数据保持 react 状态，因为该方法需要太多的计算能力。

• 我可以使用全局事件总线，但感觉它与 vuex 一起使用不太合适(对吧？)

• 我可以通过向路由器 View 添加事件监听器来在我的应用程序的根目录中处理它 <router-view @exportClick="handleExportData">然后是目标编辑器组件，但感觉不太好，因为后来我可能需要 100 个听众。

这有什么好的做法吗？还是我在设置应用程序的方式上犯了一些错误？文档中是否忽略了某些内容？

Answer 1

在使用 Vue 两年多之后，我有足够的信心来回答我自己的问题。它归结为路由器 View 之间的通信。我已经提出了两种可能的解决方案，我将分别解决它们:

事件总线

Use global events bus (but it doesn't feel right to use it together with vuex)

好吧，它可能感觉不对，而且肯定不是您必须考虑的第一件事，但它是事件总线的完美用例。此解决方案的优点是组件仅通过事件名称耦合。

路由器 View 事件监听器

I could handle it in root of my app by adding event listener to router-view <router-view @exportClick="handleExportData"> and then target editor component, but it does not feel right as well as later i could need 100 listeners.

这个问题的解决方法也可以，买耦合组件一起。耦合发生在包含 <router-view/> 的组件中设置所有监听器的位置。

可以通过将带有事件:处理程序 映射对的对象传递给v-on 来解决大量监听器问题指示;像这样:

<router-view v-on="listeners"/>

...

data () {
   return {
      listeners: {
         'event-one': () => console.log('Event one fired!'),
         'event-two': () => console.log('The second event works as well!')
      }
   }