VueJS 2 无法在mounted()、created() 钩子中发出事件答案

【问题标题】：VueJS 2 can't emit event in mounted(), created() hooksVueJS 2 无法在mounted()、created() 钩子中发出事件
【发布时间】：2021-02-12 20:56:02
【问题描述】：

出乎意料，发射器停止工作：

事件总线.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
        });
      }
},

另一个组件.vue

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

无论我如何尝试在mounted/created 中发出事件，它都不起作用。触发点击事件时没有问题。

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

【问题讨论】：

将调试器放在上面一行 - 检查 EventBus 事件数组 - 如果为空，其他组件尚未注册任何内容，如果调试器从未触发 axios throws
你确定axios.get中没有error吗？
是的，我确定：codesandbox.io/s/…
@RamkatLTU 尝试在created:hook 而不是mouted 中添加监听器。我有一种感觉，在 event 是 $emitted 之前，您的 $on 可能还没有“到位”

标签： javascript vue.js vuejs2

【解决方案1】：

子组件挂载before它们的父组件。

这是您的示例中发生的序列：

HelloWorld（父级）已创建
Test（子）已创建
Test (child) 已挂载，它会发出一个事件
HelloWorld（父级）已挂载，它订阅已发出的事件

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

demo

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

这是一个很好的做法，但即使使用camelCase 也应该可以使用。编译器无论如何都会改变它。
@AdamOrlov 这是唯一正确的语法，请检查vuejs.org/v2/guide/components-custom-events.html#Event-Names
"由于这些原因，我们建议您始终使用 kebab-case 作为事件名称。"仍然是很好的做法，不仅仅是“正确的语法”。
我实际上使用 camelCase 并且它适用于其他事件，无论如何更改为 kebab-case 仍然是同样的问题。
很奇怪，可以提供codesandbox中的示例代码吗？

【解决方案3】：

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

代码中的含义。

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

在活动注册前第一次运行

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

【讨论】：