在vue中使用组件时命名的大小写问题
在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,例如 <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>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<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(短横线分隔命名)的事件名。
五、资料
前端学习交流QQ群,群内学习讨论的氛围很好,大佬云集,期待您的加入:862748629 点击加入
更多推荐
所有评论(0)