Vue中emit事件命名的核心矛盾在于父组件监听必须用kebab-case，因HTML模板不区分大小写；子组件触发时可灵活，但推荐统一用短横线以保持一致。
Vue 中 emit 事件命名的核心矛盾，其实不是“该用哪种写法”，而是“在哪用哪种写法”——子组件触发时可灵活，父组件监听时必须用 kebab-case。这个限制不是风格建议，而是 HTML 模板解析机制决定的硬性规则。
监听端：模板里只能写 @xxx-yyy，不能写 @xxxYyy
HTML 不区分大小写，浏览器会把 @itemAdded 自动转成 @itemadded，导致完全无法匹配子组件发出的事件。所以：
- ✅ 正确写法：
<MyList @item-added="handleAdd" @search-submitted="onSearch"> - ❌ 错误写法：
<MyList @itemAdded="">（DOM 模板中失效） - ⚠️ 注意：即使在 SFC 的 template 中，也推荐统一用 kebab-case，避免开发环境与生产环境行为不一致
触发端：defineEmits 中两种写法都支持，但建议对齐监听形式
Vue 会自动做映射：你在 defineEmits(['item-added', 'form-reset']) 里写短横线，在 $emit('item-added') 中调用，是最直接、无歧义的方式。
- ✅ 推荐：
defineEmits(['filter-applied', 'upload-error'])—— 和模板监听名完全一致 - ? 可行但需谨慎：
defineEmits(['filterApplied', 'uploadError'])—— Vue 会尝试映射到@filter-applied，但团队协作中容易混淆 - ❌ 混用风险高：
defineEmits(['item-added', 'formReset'])—— 既不统一，也不利于排查
命名本身：动词优先、语义明确、避开原生事件名
事件名不是 ID，是“一句话快照”。读出来要是通顺的英文短句，且不能和 DOM 原生事件重名：
立即学习“前端免费学习笔记（深入）”；
- ✅ 好名字：
item-selected（an item was selected）、profile-updated（the profile was updated） - ❌ 模糊名：
click（易被当成原生点击）、change（和 input/change 重叠）、success（没说明什么成功） - ⚠️ 状态名不是事件名：
is-open、showing是响应式数据，不该作为 emit 名
v-model 场景：update:xxx 必须严格对应 kebab-case 监听
当组件支持 v-model 时，比如 prop 名是 userName，子组件要 $emit('update:userName', value)，父组件监听必须写成 @update:user-name：
- Vue 把
update:userName自动映射为@update:user-name，这是内置机制 - 如果写成
@update:username或@update:UserName，监听会静默失败 - 建议 props 用 camelCase 定义，emit 用
update:xxx形式，监听统一走 kebab-case
