Vue3应用中$emit调用行为异常求助：部分emit未触发

核心问题 #

Vue3自定义事件名严格区分大小写，你模板中使用的@handle-error（短横线分隔命名），与组件内$emit("handleError")（驼峰命名）不匹配，导致后续事件无法触发；另外async函数中await与.then/.catch混用的写法，虽不报错但易引发逻辑混淆。

解决方案 #

1. 统一事件命名格式
   将组件内$emit的事件名改为与模板一致的短横线形式：

async updateContact(contact) {
    this.$emit("loading", true);
    try {
      const response = await this.updateCustomerDetails();
      console.log(response);
    } catch (error) {
      // 与模板@handle-error保持命名一致
      this.$emit("handle-error", error);
    }
    this.$emit("loading", false);
}

2. 优化异步逻辑写法
   用try/catch替代await+.then/.catch的嵌套写法，让异步流程更清晰，便于排查逻辑问题：
   上述代码已完成优化，这种写法更符合async/await的最佳实践，避免回调嵌套带来的可读性问题。

3. 验证异步函数正确性
   确保updateCustomerDetails()返回标准Promise，且内部错误会被正确抛出（未被内部try/catch吞掉），这样catch块才能捕获错误并触发事件。

关键说明 #

Vue3移除了Vue2中自动将驼峰事件名转换为短横线的特性，自定义事件名必须完全匹配模板中的写法，包括大小写和分隔符。

内容的提问来源于stack exchange，提问作者ProNotion