Vue 3中$emit触发后父组件无法接收的问题如何解决？

核心优先排查项（90%以上的问题来源于此） #

你给出的父组件监听示例存在基础用法错误：自定义事件必须绑定在子组件的实例标签上，不能绑定在普通HTML标签上。
正确写法示例：

<template>
  <!-- 假设你的子组件注册名称为 JobChild -->
  <JobChild @sendjob="doSomething" />
</template>
<script>
import JobChild from './JobChild.vue'
export default {
  components: { JobChild },
  methods: {
    doSomething(payload) {
      console.log('It works', payload)
    }
  }
}
</script>

其他常规排查步骤 #

• 检查事件名匹配规则：Vue3的DOM模板中会自动将标签属性转为全小写，如果你使用驼峰命名事件（如sendJob），父组件监听时需要转为kebab-case格式@send-job才能匹配，推荐所有自定义事件统一使用kebab-case命名避免大小写问题。
• 子组件显式声明emits选项：在子组件的导出配置中添加emits: ['sendjob']，既可以避免和原生事件名冲突，也能关闭Vue的未声明事件警告，写法如下：

  <!-- 子组件配置 -->
  <script>
  export default {
    emits: ['sendjob'], // 新增这一行
    data() {
      return { Job: {} }
    }
  }
  </script>
  

• 排除跨级传值场景：$emit只能将事件传递给直接父组件，如果你的监听方是隔代组件、兄弟组件等非直接父级，无法直接监听$emit事件，需要使用Pinia、全局事件总线、provide/inject等方案实现跨组件通信。
• 多根节点组件透传排查：如果你的子组件有多个根节点（Fragment），未显式声明的自定义事件会被自动透传到根节点，显式在子组件emits选项中声明事件即可解决该问题。
• 检查是否添加了错误的事件修饰符：如果监听时加了Vue3已移除的.native修饰符，会导致自定义事件监听失效。

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