Vue自定义事件触发后父组件绑定回调不执行问题排查修复

问题现象 #

开发过程中触发子组件自定义事件后，父组件绑定的回调未执行：

• 子组件内调用this.$emit('reloadTable')后控制台正常输出safe
• 通过vue-devtool可确认事件已触发，但父组件绑定的fetchData方法未执行，无预期的test输出
• 给父组件export default添加name: "TableComponent"配置后功能恢复正常

相关代码 #

父组件 TableComponent #

<template>
  <rowcomponent @reloadTable="fetchData(pagination.current_page)" :item_data="item" :isDOMadd="false" :workflowoffer_id="workflowoffer_id"></rowcomponent>
</template>

<script>
import rowcomponent from "./rowcomponent";

export default{
  // 新增该行配置后问题解决
  // name: "TableComponent",
  methods :{
    fetchData(url){
      console.log('test');
    },
    // 注意：原代码此处components配置嵌套在methods内部属于语法错误，建议修正到和methods同级
  },
  components: {
    rowcomponent,
  },
}
</script>

子组件 RowComponent #

<script>
export default{
  methods :{
    safeData(){
      console.log('safe');
      this.$emit('reloadTable');
    }
  }
}
</script>

根因说明 #

• 首先优先修正代码语法问题：你贴出的原始代码存在template标签未闭合、components组件注册配置被错误嵌套在methods内部的问题，语法错误会导致Vue组件初始化逻辑异常，修正后可避免大部分偶现问题。
• 核心原因和Vue的组件实例识别、缓存机制有关：
  • 当组件未显式声明name属性时，Vue会自动根据文件名、父组件注册时的命名推导组件唯一标识，开发环境下热更新、同项目存在相似匿名组件时，容易出现实例缓存冲突，事件监听器被绑定到了旧的缓存实例上，真实渲染的子组件实例没有绑定对应的回调，就会出现事件已触发但回调不执行的问题。
  • 显式添加name属性后，Vue会使用你声明的名称作为组件的唯一标识做实例匹配、缓存管理，规避了匿名组件的识别冲突，事件监听器可以正确挂载到实际渲染的子组件实例上，回调就能正常触发。

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