Vuejs не может получить данные с помощью шины событий

Question

У меня есть две страницы / компоненты и EventBus.

page1 / component1 ->

EventBus.$emit('customEvent', this.data); 
this.$router.push('urlOfPage2');

page2 / component ->

mounted() {
  EventBus.$on('customEvent', function(val) {
    console.log('value', val);
  }
  console.log('Reached here'); 
}

Теперь я вижу часть «Достигнуто здесь», но $ on не показываетне работаетЭто просто пропускает это полностью.Что я делаю не так?

Answer 1

Проблема в том, что ваше событие отправляется на шину до того, как ваш page2/component будет создан / подключен. То есть Ваш page2/component еще не существует, когда событие запускается и подписывается на событие только после того, как оно уже было отправлено. (EventBus не кэширует и не передает события более поздним подписчикам)

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

Answer 2

1 - сначала создайте файл eventbus.js и добавьте код внутри

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

2- page1 / component1

import EventBus from './event-bus';

и используйте его следующим образом

EventBus.$emit('EVENT_NAME', payLoad);

Надеюсь, это поможет