vue 组件命名

最新推荐文章于 2025-07-07 15:53:34 发布

原创最新推荐文章于 2025-07-07 15:53:34 发布 · 3.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

2019之前专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了在注册组件时的命名约定，包括kebab-case(短横线分隔命名)、camelCase(驼峰式命名)和PascalCase(单词首字母大写命名)的使用场景。在HTML模板中推荐使用kebab-case，而在组件定义中则可以使用任意一种命名方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件命名约定

当注册组件 (或者 prop) 时，可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。

在 HTML 模板中，请使用 kebab-case：

// 在组件定义中
components: {
  // 使用 kebab-case 注册
  'kebab-cased-component': { /* ... */ },
  // 使用 camelCase 注册
  'camelCasedComponent': { /* ... */ },
  // 使用 PascalCase 注册
  'PascalCasedComponent': { /* ... */ }
}

在 HTML 模板中，请使用 kebab-case：

<!-- 在 HTML 模板中始终使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-cased-component></pascal-cased-component>

当使用字符串模式时，可以不受 HTML 大小写不敏感的限制。这意味实际上在模板中，你可以使用下面的方式来引用你的组件：

kebab-case
camelCase 或 kebab-case (如果组件已经被定义为 camelCase)
kebab-case、camelCase 或 PascalCase (如果组件已经被定义为 PascalCase)

components: {
  'kebab-cased-component': { /* ... */ },
  camelCasedComponent: { /* ... */ },
  PascalCasedComponent: { /* ... */ }
}

<kebab-cased-component></kebab-cased-component>

<camel-cased-component></camel-cased-component>
<camelCasedComponent></camelCasedComponent>

<pascal-cased-component></pascal-cased-component>
<pascalCasedComponent></pascalCasedComponent>
<PascalCasedComponent></PascalCasedComponent>

这意味着 PascalCase 是最通用的声明约定而 kebab-case 是最通用的使用约定。