Vue3自定义事件命名规则疑问：kebab-case监听不生效原因排查

核心原因 #

Vue 对 props 和自定义事件的命名处理逻辑完全不同，你遇到的现象属于预期内的正常表现：

• props 为了适配 HTML 属性大小写不敏感的特性，做了专门的自动转换：在模板里写的 kebab-case 格式 prop 会被自动转为 camelCase，和组件内声明的驼峰命名 props 匹配，所以你可以用短横线传参、驼峰接收。
• 自定义事件不存在任何自动大小写/格式转换逻辑，$emit 触发的事件名和父组件监听的事件名会做完全匹配，只要两个字符串不一样就无法触发。

你的场景的具体说明 #

1. 当你子组件写 this.$emit('showNextStep') 时，触发的事件名字符串就是 showNextStep，此时父组件只有写 @showNextStep="showNextStep" 才能匹配上，写 @show-next-step 两个字符串不匹配，自然触发不了。
2. 当你把 emit 内容改成 this.$emit('show-next-step')，事件名字符串就是 show-next-step，和父组件的 @show-next-step 完全匹配，所以能正常触发。

最佳实践 #

官方推荐自定义事件统一使用 kebab-case 命名，原因是如果你的模板是直接写在 HTML 文件里的 DOM 模板（而非单文件组件的 <template> 块），HTML 会自动把所有属性名转为小写，此时 @showNextStep 会被浏览器解析成 @shownextstep，和你 emit 的 showNextStep 匹配不上，用全小写+短横线的命名可以避免这类兼容问题。

正确的统一写法参考：
子组件触发：

this.$emit('show-next-step')

父组件监听：

<upsetting-moment-step
  :this-step-number="1"
  :current-step-number="currentStepNumber"
  @show-next-step="showNextStep"
></upsetting-moment-step>

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