首先直接解决你的核心疑问：在Vue3的v-on对象语法中，回调对象的键需要使用camelCase格式才能匹配组件触发的kebab-case事件，这是Vue3标准化的事件名处理逻辑导致的。

为什么kebab-case的键不生效？ #

Vue3对事件名做了统一的自动转换规则：

• 当组件通过$emit('event-a')触发kebab-case格式的事件时，Vue会自动将这个事件名转换为camelCase（即eventA），用于在脚本层面查找对应的回调函数。
• 而v-on的对象语法属于脚本层面的用法，Vue会直接用转换后的camelCase事件名去匹配你回调对象中的键。如果你写'event-a'作为键，它和转换后的eventA不匹配，自然不会触发回调。

反过来，当你用eventA作为键时，它正好和Vue转换后的事件名完全匹配，所以能正常生效。

这是标准行为吗？会变更吗？ #

这是Vue3的标准设计行为，不太可能发生变更。它遵循了Vue一贯的命名规范：

• 模板层面（HTML环境）使用kebab-case（符合HTML特性的命名习惯，比如<my-component @event-a="handleEventA" />）
• 脚本层面（JS环境）使用camelCase（符合JavaScript的变量/函数命名规范）

v-on的对象语法本质是在脚本中定义回调映射，所以自然遵循JS的camelCase规则。

有没有更合适的设计模式替代？ #

其实当前的写法已经很简洁了，如果你想进一步优化，可以参考这些方案：

• 遵循Vue约定的写法：保持回调对象用camelCase键，组件触发kebab-case事件，这是最符合Vue设计理念的写法，代码也最清晰。
• 统一事件名风格（不推荐）：如果一定要让回调对象的键和事件名完全一致，可以在组件触发事件时使用camelCase（比如$emit('eventA')），但这样在模板中监听时需要用@event-a或者@eventA（后者在HTML中不规范，因为HTML特性名不区分大小写），所以不推荐。
• 手动转换映射（可选）：如果你有特殊需求必须用kebab-case的键，可以写一个工具函数将回调对象的kebab-case键转换为camelCase，再传给v-on，但这会增加不必要的复杂度，除非特殊场景否则不建议。

关于文档的补充 #

你提到找不到关于v-on对象语法的详细说明，其实官方文档中把这种写法称为v-on的对象语法，虽然没有专门强调大小写转换，但在「组件事件」的通用规则里有明确提到：

组件触发的事件名应该始终使用kebab-case，而在监听时，你可以在模板中用kebab-case，或者在脚本中用camelCase的方法名。

v-on对象语法作为脚本层面的监听方式，自然遵循脚本中用camelCase匹配的规则。

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