Vuejs 2 Can't Emit Event In Mounted(), Created() Hooks

Out of the blue, emitter stopped working: event-bus.js import Vue from 'vue'; export const EventBus = new Vue(); import { EventBus } from '../event-bus'; ... mounted() { this.

Solution 1:

Child components mount before their parent component.

This is the sequence occurring in your example:

1. HelloWorld (parent) is created
2. Test (child) is created
3. Test (child) is mounted, which emits an event
4. HelloWorld (parent) is mounted, which subscribes to the event that was already emitted

If you want HelloWorld to catch the event from its children, subscribe to the event in the created hook.

demo

Solution 2:

According to this You should use kebab-case format to name your custom events :

EventBus.$emit('cartLoaded', this.cart);//not correct

EventBus.$emit('cart-loaded', this.cart); //correct

Solution 3:

May be the event emitted before MiniCart.vue component registered the event.

Meaning in code.

  EventBus.$emit('cartLoaded', this.cart);

this run first time before the event has been registered

EventBus.$on('cartLoaded', (payload) => {
        ...
      });