vue组件事件命名需用kebab-case监听，js中可用camelcase；推荐动词或名词结尾、语义清晰、避免原生事件名冲突，大型项目可统一加前缀。
Vue 组件事件命名要兼顾可读性、一致性与 HTML 兼容性。核心是：在 JS 定义中可用 camelCase，但在模板中监听时必须用 kebab-case（连字符分隔），且推荐事件名以动词或名词结尾，避免歧义。
事件名统一用 kebab-case 监听
虽然 defineEmits 中可以写 updateUser 或 uploadSuccess，但父组件在模板里监听时，必须写成 @update-user 或 @upload-success。Vue 会自动把 kebab-case 转为 camelCase 匹配，这是 HTML 属性不区分大小写的限制决定的。
- ✅ 正确：
<myform></myform> - ❌ 错误：
<myform></myform>（DOM 模板中无法识别） - ⚠️ 注意：SFC 模板虽支持 PascalCase 标签，但事件监听仍强制走 kebab-case
语义清晰，优先动词开头
事件名应直接反映“发生了什么”，而不是“谁触发的”。用动作或结果来命名，比用来源更利于维护。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ✅ 推荐：
item-added、filter-applied、file-upload-error - ❌ 避免：
click（易与原生事件混淆）、mybutton-click（冗余且无意义）、success（太模糊） - ? 小技巧：把事件名读出来，像一句简短的英文陈述——“an item was added” →
item-added
避免与原生事件冲突
不要用 click、input、change 等原生 DOM 事件名作为自定义事件，否则容易引发误解或调试困难。
- ✅ 安全：
item-selected、search-submitted、tab-changed - ❌ 危险：
click（父组件可能误以为是原生点击）、input（与v-model内部机制重叠） - ? 检查方式：在浏览器开发者工具中查看事件监听器列表，确认没有重复或覆盖
前缀可选，但需项目内统一
大型项目中，加业务或模块前缀有助于归类（如 user-login-success），但不是必须。关键是整个团队保持一致，不混用 on-、handle-、do- 等风格。
- ✅ 可行：
auth-token-expired、cart-item-removed（明确上下文） - ❌ 混乱：
onItemAdd（JS 风格）、handleUpload（像方法名）、uploadDone（时态不统一） - ? 建议：如果用了前缀，就固定用一种，比如全部用名词结构
user-updated，别一半动词一半名词
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
