在vue中使用组件时命名的大小写问题

---

一、一些命名概念

kebab-case：短横线分隔命名，比如 my-component-name

PascalCase：首字母大写命名，比如 MyComponentName

camelCase：驼峰命名法，比如 myComponentName

---

二、组件名

在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候，组件名就是 Vue.component 的第一个参数。

Vue.component('my-component-name', {
      /* ... */ })

定义组件名的方式有两种：

1、使用 kebab-case 短横线分隔命名

Vue.component('my-component-name', {
      /* ... */ })

当使用 kebab-case (短横线分隔命名) 定义一个组件时，也必须在引用这个自定义元素时使用 kebab-case，例如 。

2、使用 PascalCase 首字母大写命名

Vue.component('MyComponentName', {
      /* ... */ })

当使用 PascalCase (首字母大写命名) 定义一个组件时，在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

---

三、Prop 的大小写

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。 这意味着当使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。

Vue.component('blog-post', {
     
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '
{
     { postTitle }}
'
})

<blog-post post-title="hello">blog-post>

如果使用字符串模板，那么这个限制就不存在了。

---

四、自定义事件的事件名

不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。

举个例子，如果触发一个 camelCase 名字的事件：this.$emit('myEvent')

则监听这个名字的 kebab-case 版本是不会有任何效果的：

<my-component v-on:my-event="doSomething">my-component>

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以v-on:myEvent 将会变成 v-on:myevent，导致 myEvent 不可能被监听到。

vue官方推荐始终使用 kebab-case（短横线分隔命名）的事件名。

---

五、资料

组件注册 — Vue.js

Prop — Vue.js

自定义事件 — Vue.js