事件总线

Question

我有两个<router-view/>：主栏和侧边栏。每个组件都提供一个组件（ EditorMain.vue 和 EditorSidebar.vue ）。

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

有什么好的解决方法？

我确实使用vuex，但是我不想让此数据具有反应性，因为该方法需要太多的计算能力。
我可以使用全局事件总线，但是将它与vuex一起使用是不合适的（对吗？）
我可以通过在路由器视图<router-view @exportClick="handleExportData">中添加事件侦听器，然后在目标编辑器组件中添加事件侦听器，从而在应用程序的根目录中进行处理，但感觉不太好，以后我可能需要100个侦听器。

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

Answer 1

您可以create a plugin处理出口：

import Vue from 'vue'

ExportPlugin.install = function (Vue, options) {
  const _data = new Map()
  Object.defineProperty(Vue.prototype, '$exporter', {
      value: {
          setData: (svg) => {
              _data.set('svg', svg)
          },
          exportData: () => {
              const svg = _data.get('svg')
              // do data export...
          }
       }
  })
}

Vue.use(ExportPlugin)

使用方式：

// EditorMain component
methods: {
    setData (data) {
        this.$exporter.setData(data)
    }
}

// EditorSidebar
<button @click="$exporter.exportData">Export</button>

Answer 2

在Vue历时两年之后，我有足够的信心回答自己的问题。归结为路由器视图之间的通信。我提出了两种可能的解决方案，我将分别解决它们：

事件总线

使用全局事件总线（但是将其与vuex一起使用是不合适的）

嗯，可能感觉不对，这当然不是您要考虑的第一件事，但这是事件总线的完美用例。这种解决方案的优势在于，这些组件仅通过事件名称耦合。

路由器视图事件侦听器

我可以通过将事件侦听器添加到router-view 然后添加目标编辑器组件，从而在我的应用程序的根目录中处理它，但是感觉不太好，以后我可能需要100位听众。

这种解决此问题的方法也很好，购买时将组件耦合在一起。耦合发生在包含<router-view/>的组件中，其中设置了所有侦听器。

可以通过将具有 event：handler 映射对的对象传递给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!')
      }
   }

另一个路由器视图组件/ Vue.js的调用方法

2 个答案:

事件总线

路由器视图事件侦听器