VueJS 2不能在挂载()中发出事件，创建()钩子

Question

突然，发射器停止工作：

event-bus.js

import Vue from 'vue';
export const EventBus = new Vue();

import { EventBus } from '../event-bus';

...

mounted() {
  this.getCart();
}

...

methods: {
      getCart() {
        axios.get(`${app.api_erp_url}/cart/${this.cartId}`).then((response) => {
          this.cart = response.data;
          EventBus.$emit('cartLoaded', this.cart); // this not working
        });
      }
},

another-component.vue

mounted() {
      // MiniCart.vue
      EventBus.$on('cartLoaded', (payload) => {
        ...
      });
    },

无论我如何尝试在mounted/created中发出事件，它都不会工作。没有问题，当触发事件的点击或其他。

创建沙箱：https://codesandbox.io/s/gracious-kilby-m43ih?fontsize=14&hidenavigation=1&theme=dark

Answer 1

子组件挂载在此之前它们的父组件。

这是在您的示例中出现的顺序：

1. 创建了HelloWorld (父)
2. 创建Test (子)
3. Test (子)被挂载，它发出一个事件
4. HelloWorld (父)被挂载，它订阅已经发出的事件。

如果希望HelloWorld从其子节点捕获事件，请在created挂钩中订阅该事件。

演示

Answer 2

根据这，您应该使用kebab-case格式来命名自定义事件：

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

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

Answer 3

可能是在MiniCart.vue组件注册事件之前发出的事件。

在代码中的意思。

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

此运行在事件注册之前第一次运行。

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