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

文章目录

• 一、一些命名概念
• 二、组件名
• 三、Prop 的大小写
• 四、自定义事件的事件名
• 五、资料

---

一、一些命名概念

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，例如 <my-component-name>。

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

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

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

---

三、Prop 的大小写

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

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

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

* * *

[](https://blog.csdn.net/weixin_43974265/article/details/113002929)四、自定义事件的事件名
==============================================================================

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

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

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

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

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

* * *

[](https://blog.csdn.net/weixin_43974265/article/details/113002929)五、资料
=======================================================================

[组件注册 — Vue.js](https://cn.vuejs.org/v2/guide/components-registration.html)

[Prop — Vue.js](https://cn.vuejs.org/v2/guide/components-props.html)

[自定义事件 — Vue.js](https://cn.vuejs.org/v2/guide/components-custom-events.html)

  

本文转自 [https://blog.csdn.net/weixin\_43974265/article/details/113002929](https://blog.csdn.net/weixin_43974265/article/details/113002929)，如有侵权，请联系删除。