Vue 官方推荐：kebab-case（短横线命名法）-开发者社区

kebab-case（短横线命名法）是一种使用连字符连接小写单词的命名方式，Vue官方推荐在模板中使用。
与camelCase（驼峰式）和snake_case（蛇形命名）不同，kebab-case在HTML中更具可读性和一致性。
Vue会自动转换模板中的kebab-case与JS中的camelCase/PascalCase，建议组件名、事件名和属性使用kebab-case，而方法和变量使用camelCase。
这种约定提高了代码可维护性，并与HTML原生属性风格保持一致。

kebab-case（短横线命名法）

kebab-case是一种命名约定，单词之间用连字符（短横线-）连接，所有字母通常为小写。

特点：

单词之间使用连字符-分隔
通常全部小写
看起来像烤串（kebab）上的肉块

示例：

// kebab-case 示例 custom-event user-profile submit-form date-picker side-bar-menu

与其他命名约定的对比

1.camelCase（驼峰命名法）

// 小驼峰（首字母小写） customEvent userProfile submitForm // 大驼峰/帕斯卡命名法（首字母大写） CustomEvent UserProfile SubmitForm

2.snake_case（蛇形命名法）

custom_event user_profile submit_form DATE_PICKER // 通常用于常量

3.PascalCase（帕斯卡命名法）

CustomEvent UserProfile SubmitForm DatePicker

在 Vue 中的使用

Vue 官方推荐

<!-- Vue 推荐在模板中使用 kebab-case --> <template> <!-- 组件名使用 kebab-case --> <user-profile @custom-event="handleEvent" /> <!-- 事件名使用 kebab-case --> <button @click="submitForm">提交</button> <!-- 属性名使用 kebab-case --> <date-picker :start-date="startDate" /> </template> <script> // 但在 JavaScript 中使用 camelCase export default { methods: { handleCustomEvent() { // 方法名使用 camelCase }, submitForm() { // 方法名使用 camelCase } } } </script>

实际转换规则

Vue 会自动在 kebab-case 和 camelCase 之间进行转换：

<!-- 模板中使用 kebab-case --> <my-component :custom-prop="value" @custom-event="handler" /> <!-- 等价于 JavaScript 中的 --> myComponent.customProp = value myComponent.$on('customEvent', handler)

Vue 中的具体应用场景

1.组件名

vue

<!-- 注册组件 --> components: { 'user-profile': UserProfile // kebab-case } <!-- 使用 --> <user-profile /> <!-- ✅ 推荐 --> <UserProfile /> <!-- ⚠️ 在 Vue 模板中也能工作，但不推荐 -->

2.自定义事件

vue

<!-- 子组件触发 --> this.$emit('user-selected', userId) // kebab-case <!-- 父组件监听 --> <child-component @user-selected="handleSelection" /> <!-- ✅ 推荐 --> <child-component @userSelected="handleSelection" /> <!-- ⚠️ 也能工作 -->

3.Props 属性

vue

<!-- 父组件传递 --> <my-component :user-name="name" /> <!-- ✅ 推荐 --> <!-- 子组件接收 --> props: { userName: String // 自动映射 }

4.Vue Router 路由

javascript

// 路由定义 const routes = [ { path: '/user-profile', // URL 路径使用 kebab-case name: 'UserProfile', // 路由名使用 PascalCase component: UserProfile } ]

为什么 Vue 推荐 kebab-case？

HTML 不区分大小写
- HTML 属性和标签名不区分大小写
- customEvent和customevent在 HTML 中是相同的

一致性

<!-- 原生 HTML 属性使用短横线 --> <div>// kebab-case 更容易阅读长名称 'user-profile-management-system' // ✅ 清晰 'userProfileManagementSystem' // ⚠️ 长名称时较难阅读

实际示例对比

vue

<!-- 使用 kebab-case（推荐） --> <template> <user-profile-card :user-data="user" @profile-updated="updateProfile" class="main-content" /> </template> <!-- 混合使用（不推荐） --> <template> <UserProfileCard :userData="user" @profileUpdated="updateProfile" class="main-content" /> </template>