Вызов метода другого компонента вида маршрутизатора / Vue.js

Question

У меня два <router-view/>s: главная и боковая панель. Каждый из них снабжен компонентом (EditorMain.vue и EditorSidebar.vue).

EditorMain имеет метод exportData(), Я хочу вызвать этот метод из EditorSidebar по нажатию кнопки.

Каков хороший способ справиться с этим?

• Я использую vuex, но я не хочу, чтобы эти данные реагировали, так как метод требует слишком много вычислительных ресурсов.

• Я мог бы использовать шину глобальных событий, но было бы неправильно использовать ее вместе с vuex (верно?)

• Я мог бы обработать это в корне моего приложения, добавив прослушиватель событий в router-view <router-view @exportClick="handleExportData"> и затем целевой компонент редактора, но он не чувствует себя хорошо, так как позже мне могут понадобиться 100 слушателей.

Есть ли хорошая практика для этого? Или я допустил некоторые ошибки при настройке приложения? Неужели что-то упущено в документации?

Answer 1

Вы можете создать плагин для обработки экспорта:

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

Я мог бы обработать это в корне моего приложения, добавив прослушиватель событий в router-view , а затем целевой компонент редактора, но это не кажется правильным, так как позже мне может понадобиться 100 слушателей.

Этот способ решения этой проблемы тоже подойдет, купите компоненты вместе. Сцепление происходит в компоненте, содержащем <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!')
      }
   }