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。
常见模式:
- 状态变更类:
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></userprofileform>,而非 <user-profile-form></user-profile-form>。
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!










