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

我有两个

s:main和sidebar。它们中的每一个都提供了一个组件（EditorMain.vue和EditorSidebar.vue）

EditorMain有一个方法

exportData（）

。我想在单击按钮时从EditorSidebar调用此方法

解决这个问题的好方法是什么？

• 我确实使用vuex，但我不想让这些数据保持被动，因为这种方法需要太多的计算能力

• 我可以使用全球事件总线，但与vuex一起使用感觉不太合适（对吗？）

• 我可以通过将事件侦听器添加到路由器视图
  ，然后添加到目标编辑器组件，在我的应用程序的根目录中处理它，但感觉不太好，因为以后我可能需要100个侦听器

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

处理导出时，您可以：

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)

使用like：

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

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

//EditorMain组件
方法：{
setData（数据）{
此.$exporter.setData（数据）
}
}
//编辑助理
出口

在与Vue共事两年后，我有足够的信心回答我自己的问题。它归结为路由器视图之间的通信。我已经介绍了两种可能的解决方案，我将分别介绍：

事件总线 使用全局事件总线（但与vuex一起使用感觉不合适）

嗯，它可能感觉不对，当然这不是您必须首先考虑的事情，但它是事件总线的完美用例。此解决方案的优点是组件仅通过事件名称耦合

路由器视图事件侦听器 我可以通过将事件侦听器添加到路由器视图，然后添加到目标编辑器组件，在我的应用程序的根目录中处理它，但感觉不太好，以后我可能需要100个侦听器

这种解决问题的方法也很好，购买它可以将组件耦合在一起。耦合发生在包含设置了所有侦听器的

的组件中

通过向

v-on

指令传递带有event:handler映射对的对象，可以解决大量侦听器的问题；像这样：

<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!')
      }
   }

...
数据（）{
返回{
听众：{
'event one'：（）=>console.log（'event one fired！'），
'eventtwo'：（）=>console.log（'第二个事件也起作用！'）
}
}

听起来是一种有趣的方法，但是我不确定如何从插件的

值：（）=>{}

函数内部的编辑器中获取私有数据。对。那么我如何触发写入数据？数据是否来自API？如果是这样，您可以执行类似

的操作。$store.commit（'export/data'））

在成功回调中。不，它不是来自API。它是经过SVG处理的。处理这个SVG需要大量的计算能力，而且它的内容经常变化——有时是每一个滴答声。这就是为什么它不能保存在状态中。我有另一个想法，看看我更新的答案是否是一个更好的方法。