Vue中this.$emit在函数执行中途突然失效的问题排查

可能原因分析 #

1. 子组件实例已被销毁/重新挂载
   父组件给子组件绑定了:key="specs_key"，如果在await this.req.sendRequest()的异步等待过程中，specs_key的值发生了变化，Vue会销毁旧的子组件实例并创建新实例。此时旧实例中await之后的this.$emit是在已卸载的组件上执行，自然无法触发父组件的监听函数——但旧实例的后续同步逻辑仍会执行，这和你描述的现象完全匹配。

2. 事件名大小写匹配问题
   Vue3中虽然支持camelCase事件名自动转换为kebab-case的监听，但偶尔会有边界情况（比如某些构建工具的配置影响）。你子组件中emit('refreshParent')，父组件监听的是@refresh-parent，可以尝试统一事件名格式。

3. 请求函数内部异常吞吃
   虽然服务器返回201，但如果sendRequest内部用了try/catch捕获异常却没有抛出reject，可能导致后续逻辑执行时组件状态已异常。

解决步骤 #

1. 验证组件是否被重新挂载 #

在子组件中添加生命周期钩子，打印日志确认：

beforeUnmount() {
  console.log('SpecificationsComponent 已卸载')
}

如果在await请求完成前看到这条日志，说明specs_key确实在请求过程中变化了。此时需要：

• 检查父组件中specs_key的更新逻辑，确保异步请求期间它不会变更；
• 或者把异步请求逻辑从组件实例中剥离，比如放到独立的API工具函数里，请求完成后通过Pinia/Vuex状态管理通知父组件刷新，而非依赖组件实例的$emit。

2. 统一事件名格式 #

将子组件中的$emit改为和父组件监听完全一致的kebab-case：

// 替换原来的refreshParent
this.$emit('refresh-parent', true)

3. 检查请求函数的异常处理 #

查看this.req.sendRequest的实现，确保它在请求成功时正确resolve，失败时reject。比如：

// 示例正确的sendRequest实现
async sendRequest(baseUrl) {
  try {
    const resp = await fetch(`${baseUrl}/xxx`, { /* 配置 */ })
    if (!resp.ok) throw new Error('请求失败')
    return await resp.json()
  } catch (err) {
    console.error(err)
    throw err // 必须抛出错误，否则await不会感知到异常
  }
}

替代方案：使用状态管理工具 #

如果组件挂载状态不稳定，推荐用Pinia或Vuex来管理数据更新状态。比如在请求完成后更新全局状态，父组件监听状态变化来执行刷新逻辑，彻底摆脱组件实例依赖。

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