Vue事件不生效主因是事件名大小写敏感及格式转换错误：emit必须全小写中划线，驼峰名会自动转短横线但需合法；仅限直接父子通信；setup中禁用this.$emit；需用console验证是否触发。

父组件没反应，大概率不是逻辑写错了，而是事件名“看起来对、其实错”。Vue 对 emit 事件名是大小写敏感的，而且会自动做格式转换——这个细节不注意，90% 的“不生效”问题就出在这儿。

事件名必须全小写 + 中划线分隔

Vue 会把驼峰命名（如 updateValue）自动转成短横线格式（update-value）去匹配监听器。但前提是：子组件 emit 时传的字符串本身得是合法的小写形式。

• ✅ 正确写法：emit('submit-form') → 父组件用 @submit-form="handler"
• ✅ 也正确：emit('changeValue') → Vue 自动转为 change-value，父组件监听 @change-value
• ❌ 错误写法：emit('ChangeValue') 或 emit('updateValue') → 转换后变成 changevalue 或 updatevalue（全连在一起），父组件监听 @change-value 就完全对不上

检查父子组件是否真在“一层关系”里

emit 只在**直接父子**间有效。如果子组件其实是孙组件（比如 A → B → C，你在 C 里 emit，想让 A 监听），那肯定收不到。

• 确认模板中父组件是否真的引用了该子组件，而不是通过插槽、动态组件或 Teleport 间接渲染
• 避免在 v-if 为 false 时提前调用 emit；也别在组件 onBeforeUnmount 后还试图触发
• 弹窗类组件要特别注意：如果先调了 close() 再 emit，可能 DOM 已卸载，事件就丢了

setup 里别用 this.$emit

Vue3 的 setup 函数中，this 是 undefined。沿用 Vue2 写法会静默失败。

• ✅ Composition API：setup(props, { emit }) { emit('save', data) }
• ✅ <script setup></script>：const emit = defineEmits(['save', 'cancel'])，再调 emit('save', data)
• ❌ 绝对不要写：this.$emit('save', data) —— 不报错，但什么也不会发生

快速验证：加个 console 看事件到底发没发

别只盯着父组件有没有响应，先确认子组件是否真的触发了。

• 在子组件 emit 前加 console.log('emitting save:', data)
• 在父组件监听的方法开头加 console.log('received save:', ...arguments)
• 如果子组件有 log、父组件没 log → 事件名或监听方式有问题
• 如果两边都有 log → 问题在 handler 内部，不是 emit 本身