Vue.js无法使用事件总线接收数据

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

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);

希望有帮助

Answer 2

问题是您的page2/component被创建/挂载之前，您的事件是在总线上 发出的。即当事件触发时，您的page2/component还不存在，只有在事件发出后才订阅该事件。 （EventBus不会缓存事件并将事件传播给以后的订阅者）

您应该改为在更高级别的组件中侦听该事件，然后将其作为prop传递给page2组件，或使用状态存储（vuex）在组件之间传递数据/状态。