Can $on listener in a component listen for an $emit from mixin?

Question

I'd like my global mixin to broadcast data to various components. Trying to listen for the custom event from the created (or mounted) event inside the component doesn't seem to work. eg.

in mixin ...

methods:  
   foo: function() {
     this.$emit('my-change','bar')
   } 

in component ...

created () {
  this.$on('my-change', function (e) {
    // do something 
  })
}

Is this possible?

Answer 1

It all depends on the component nesting level, let's assume you have the following component structure, parent and a child component (and mixin, of course).

Parent.vue (you listen for the incoming event changes here):

private created(): void {
  this.$on('event', (value: boolean) => {
    console.log(value)
  })
}

And you have injected your mixin in a parent component:

private someRandomMethod(): void {
  this.$emit('event', true)
}

This would work, because your mixin is directly injected to a Parent.vue, so "Parent" component itself would be emitting an event. But if you've injected mixin in a "Parent" component, one level deeper (Parent > Child), you would need to emit like this:

this.$parent.$emit('event', true)

$parent makes your emit one level higher.

Also instead of using event Bus, you can use $root instance, so you have to listen it, like this.$root.$on, and emit it from mixin this.$root.$emit()