Share data between non related components

I’m trying to set up a vue event bus to send events between my components, I have this within my app.js file Vue.prototype.$eventBus = new Vue(); then in one component I have this

this.$eventBus.$emit('pnc-person', remarkString);

and in a different component, within the mounted method I have this,

this.$eventBus.$on('pnc-person', (data) => {
  console.log(data);
});

The event is emitted successfully, and I can see that in the vue dev tools, but it is not caught by the second component, I am using vue router so I’m not sure if that would affect it

Your component must be mounted to receive the event. It sounds like you are going between one route to another when this event occurs, which means the second component will never receive the event.

This is the exact reason we don’t recommend event buses - they are too dependant on the listener being active to receive the data. Instead, we recommend using state management as the store is always present.

1 Like

Sir, have you considered converting to VueX, it is indeed designed by nature to support such shared state across your entire app.

I understand my component must be mounted, bit it is. The component that listens for the event is the one that opens the component that sends the event. Although the component that sends the event opens in a second browser window

Well then that’s your problem. That component is going to be in a completely different instance and therefore using a different event bus.

You would have to use cross tab communication to achieve that.