Передача событий от вложенных детей в родительский объект Vue - PullRequest
Новая
       8

Передача событий от вложенных детей в родительский объект Vue

0 голосов
/ 11 января 2019

Я работаю над компонентом Vue, который будет повторно использоваться в различных проектах (и будет доступен через npm install ...), и у меня есть главный вопрос, как обрабатывается отправка события.

Сам компонент содержит несколько вложенных дочерних элементов, таких как: 

component-parent
  |-child 1
  |-child 2
      |-child 3
         |-child 4

Когда компонент включен в некоторый проект, тогда component-parent будет отображать все события, которые испускаются из всего компонента. И бродил, как внутрикомпонентные события передаются в component-parent. Например, если я хочу передать событие от child 4 до component-parent, тогда child 4 отправляет child 3, которое отправляет child 2, а в конечном итоге component-parent.

Такой рабочий процесс работает нормально, но выглядит не очень практично.

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

И еще один вопрос по поводу использования vuex. Если vuex включено в сам компонент, возможно ли передать его из него в компонент проекта (в который включен мой компонент)? Включение vuex в мой компонент приведет к тому, что основной проект получит два экземпляра vuex. Есть ли блокираторы для нескольких магазинов?

1 Ответ

0 голосов
/ 21 января 2019

После некоторого тестирования я решил пойти с EventBus. EventBus позволяет отправлять / получать события между компонентами. Компоненты могут быть частью одного и того же родительского дерева или полностью другого. Больше информации здесь

Но в целом event-bus.js файл должен быть создан 

import Vue from 'vue';
export const EventBus = new Vue();

И затем импортируется в любой компонент, который будет использовать механизм EventBus 

<script>
// Import the EventBus we just created.
import { EventBus } from './event-bus.js';
...

Затем из отправляющего компонента выдается событие 

EventBus.$emit('i-got-clicked', this.clickCount);

Любой компонент, который загрузил EventBus, может прослушивать такие события: 

EventBus.$on('i-got-clicked', clickCount => {
  console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});

Чтобы прекратить прослушивать события: 

EventBus.$off('i-got-clicked');

Лично я нахожу EventBus довольно простым и полезным, но я, вероятно, буду использовать их только при разработке компонентов, которые будут включены в другие проекты. Для тех же компонентов проекта Vuex более чем достаточно

...