0

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.

I have tried using both this.$route.$on and this.$eventBus.$on but neither seem to log anything

hcphoon
  • 538
  • 5
  • 24
  • Yes, this could affect it - the second component might not have been created yet at the moment you emit the event. – IVO GELOV Jun 30 '20 at 16:34
  • @IVOGELOV, I dont think that will be the case, the component that catches the event is required to be open to allow the component that emits the event to open – hcphoon Jun 30 '20 at 17:04
  • Then perhaps you can try with `this.$root.$on` and `this.$root.$emit` instead of `$eventBus` ? – IVO GELOV Jun 30 '20 at 18:01
  • @IVOGELOV not made any difference – hcphoon Jun 30 '20 at 18:06
  • Well, then it would be helpful if you can reproduce the issue in a CodePen/Jsfiddle/CodeSandbox example. We can make a better troubleshooting. – IVO GELOV Jul 01 '20 at 09:00

1 Answers1

0

Maybe your listening component is not builded yet when your emitting component sends its event.

Have you tried to put the this.$eventBus.$on part in created rather than mounted ?

hnrd
  • 265
  • 1
  • 4
  • 13
  • I've tried that but it doesnt fix it, the component is definately built when the event is emitted as the component that emits the event is only opened from the component that catches the event – hcphoon Jun 30 '20 at 16:59