Vue. js: Глобальная шина событий не может перехватить событие

Question

Я пытаюсь создать глобальную шину событий, которая будет отправляться из Source.vue, чтобы быть перехваченной в Destination.vue. Последний компонент должен запускать функцию при обнаружении события.

Source.vue:

.then(() => {
    eventBus.$emit("fireMethod");
})

Destination.vue:

updated() {
  eventBus.$on("fireMethod", () => {
    this.reqMethod();
  });
}

main.js:

export const eventBus = new Vue();

Я также импортировал Основной. js файл в обоих компонентах. Но, похоже, это не сработает, так как событие вообще не пойман. Что здесь не так? Заранее спасибо

Answer 1

Обновленная ловушка запускается после изменения данных вашего компонента и повторного рендеринга DOM. Следовательно, при первоначальном рендере ваш слушатель событий не регистрируется, так как событие в это время не запускается.

Пожалуйста go через эту скрипку , чтобы получить четкое представление о vue компонентах жизненный цикл.

Следовательно, в пункте назначения. vue:

Ваш обработчик событий должен быть смонтирован, а не обновлен.

mounted() {
  eventBus.$on("fireMethod", () => {
    this.reqMethod();
  });
}

Answer 2

Для регистрации шины глобальных событий вы можете использовать это в вашем main.js

Vue.prototype.$eventHub = new Vue();        //global event bus

А затем в ваших компонентах используйте это как

//on emit
this.$eventHub.$on('your-event',function(){});

//to emit
this.$eventHub.$emit('your-event',data);