Vue组件API命名遵循可读性、一致性、类型安全和业务语义原则：Props用camelCase并带业务上下文；事件用kebab-case且动词表意图；插槽语义化命名；组件名用PascalCase且多词防冲突。
Vue 组件 API 的命名不是随意拼凑，而是围绕可读性、一致性、类型安全和业务语义构建的一套实践体系。核心目标是让使用者“看名知意、用得顺手、改得安心”。
Props 命名：统一用 camelCase，带业务上下文
所有 prop 名必须使用小驼峰（camelCase），避免中划线或大驼峰。这不是风格偏好，而是 Vue 编译器对 JavaScript 对象属性的天然支持——模板中写 v-bind:is-loading="true"，实际接收的仍是 isLoading。
关键细节：
- 不单用缩写，如用
showCloseButton而非showClose或closeBtn - 布尔类 prop 必须以
is、has、can、should开头，例如isDisabled、hasHeader - 枚举类 prop 需配合 validator，如
status只接受'idle' | 'loading' | 'success' | 'error' - 每个 prop 必须声明
type和default或required: true，TypeScript 接口需同步导出
事件命名：全小写 + 中划线，动词表意图
自定义事件名采用 kebab-case（小写+短横线），这是 Vue 官方推荐且 DOM 原生事件兼容的最佳实践。比如组件内部触发 update:modelValue，父组件监听时可写 @update:model-value，Vue 会自动转换为 onUpdateModelValue。
立即学习“前端免费学习笔记（深入）”；
常见模式：
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 状态变更类：
update:model-value、change:tab-index - 用户交互类：
click:outside、submit:form、select:item - 生命周期/流程类：
open:drawer、cancel:edit
避免模糊动词如 done、ok；优先用 confirm、apply、discard 等明确表达动作意图的词。
插槽命名：语义化 + 默认 slot 保留无名
具名插槽名同样使用 kebab-case，强调其内容角色而非技术实现。默认插槽保持匿名，不强制命名；有多个逻辑区域时，按内容职责命名：
-
header、footer、actions—— 通用布局区 -
empty-state、loading-indicator、error-message—— 状态反馈区 -
item-content、row-actions—— 列表/表格子项级插槽
不建议用 slot1、customSlot 这类无意义名称；也不推荐过度拆分，一个插槽能承载的结构尽量收敛。
组件自身命名：PascalCase，多词且可读
组件名本身也是 API 的一部分。必须使用 PascalCase，且至少两个单词，防止与原生 HTML 标签冲突（如 Button 易混淆，BaseButton 或 AppButton 更安全）。
命名逻辑分层清晰：
- 基础组件：以
Base或Ui开头，如BaseInput、UiAvatar - 业务组件：体现领域，如
OrderSummaryCard、UserProfileForm - 页面组件：以
Page结尾，如DashboardPage、ProductListPage
组件注册时，在模板中也应使用 PascalCase 自闭合写法：<UserProfileForm />，而非 <user-profile-form></user-profile-form>。
