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 官方推荐

javascript 复制代码

<!-- 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 之间进行转换：

javascript 复制代码

<!-- 模板中使用 kebab-case -->
<my-component :custom-prop="value" @custom-event="handler" />

<!-- 等价于 JavaScript 中的 -->
myComponent.customProp = value
myComponent.$on('customEvent', handler)

Vue 中的具体应用场景

1. 组件名

vue

javascript 复制代码

<!-- 注册组件 -->
components: {
  'user-profile': UserProfile  // kebab-case
}

<!-- 使用 -->
<user-profile />  <!-- ✅ 推荐 -->
<UserProfile />   <!-- ⚠️ 在 Vue 模板中也能工作，但不推荐 -->

2. 自定义事件

vue

javascript 复制代码

<!-- 子组件触发 -->
this.$emit('user-selected', userId)  // kebab-case

<!-- 父组件监听 -->
<child-component @user-selected="handleSelection" />  <!-- ✅ 推荐 -->
<child-component @userSelected="handleSelection" />   <!-- ⚠️ 也能工作 -->

3. Props 属性

vue

javascript 复制代码

<!-- 父组件传递 -->
<my-component :user-name="name" />  <!-- ✅ 推荐 -->

<!-- 子组件接收 -->
props: {
  userName: String  // 自动映射
}

4. Vue Router 路由

javascript

javascript 复制代码

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

为什么 Vue 推荐 kebab-case？

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

一致性

html 复制代码

<!-- 原生 HTML 属性使用短横线 -->
<div data-custom-attribute="value">
<input aria-label="姓名">

<!-- Vue 保持一致 -->
<my-component custom-attribute="value" />

更好的可读性

javascript 复制代码

// kebab-case 更容易阅读长名称
'user-profile-management-system'  // ✅ 清晰
'userProfileManagementSystem'     // ⚠️ 长名称时较难阅读

实际示例对比

vue

javascript 复制代码

<!-- 使用 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>

总结

kebab-case: 用于 HTML 模板、自定义事件名、DOM 属性
camelCase: 用于 JavaScript 代码、方法名、变量名
PascalCase: 用于组件定义、类名、构造函数

Vue 会自动处理这些命名约定之间的转换，但遵循官方推荐可以使代码更加一致和可维护。