Vue组件事件命名必须用kebab-case，如@user-updated；需语义清晰、动词开头，避免原生事件名和状态描述，v-model绑定时须匹配update:xxx格式。
Vue 组件事件命名不是随便起个名字就行，核心是让父组件能一眼看懂“这个事件干了什么”，同时和 Vue 的大小写转换机制配合好，避免出错。
事件名必须用 kebab-case（短横线分隔）
这是最硬性的规范。无论你在 defineEmits 里怎么写，在模板中监听时都得用小写加短横线形式，比如 @user-updated、@item-removed。原因很实际：HTML 属性不区分大小写，@userUpdated 和 @userupdated 在 DOM 中会被当成同一个东西，容易出 bug。
- ✅ 正确写法：
@input-changed、@form-submitted - ❌ 错误写法：
@inputChanged、@submit（与原生事件冲突）、@update（太模糊）
语义清晰，动词+名词结构优先
事件名要表达“发生了什么动作”，而不是“状态是什么”。推荐用动词开头，说明组件内部做了什么操作，方便父组件准确响应。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ✅ 推荐：
@search-triggered、@menu-opened、@avatar-cropped - ⚠️ 谨慎：
@search（太泛）、@open（没说明谁打开、什么打开） - ❌ 避免：
@is-open、@showing（这是状态，不是事件）
与 props 的 update:xxx 机制保持一致
如果你用 v-model 双向绑定，事件名要严格匹配 update:xxx 格式，其中 xxx 是对应 prop 的 camelCase 名称。Vue 会自动把 update:userName 映射为 @update:user-name 监听。
立即学习“前端免费学习笔记（深入）”；
- 子组件定义 prop：
userName（camelCase） - 触发事件：
$emit('update:userName', newValue) - 父组件监听：
@update:user-name（kebab-case）
避免与原生事件或保留字冲突
别用 click、input、change 这类原生事件名，也别用 class、style、ref 等 Vue 内部属性名。否则模板解析会混乱，IDE 也可能报错或失去提示。
- ✅ 安全：
@custom-click、@value-input、@data-changed - ❌ 危险：
@click（覆盖原生）、@class（语法错误）、@ref（保留字）
