Vue中的一些命名规范
在重新回顾vue官网的时候,发现一些很容易被遗忘和混淆的命名规范,今天就拿出来一起总结一下。组件名在注册一个组件的时候,我们始终需要给他起一个名字,在起这个名字的时候我们需要注意什么呢?vue强烈建议遵循w3c规范中的自定义组件命名——字母全部小写并且必须包含一个连字符。这会帮助你避免和当前或者未来的html元素相冲突。例如:Vue.component('my-component-name', {
在重新回顾vue官网的时候,发现一些很容易被遗忘和混淆的命名规范,命名规范虽然只是一个建议,但是在一个项目中混乱的使用多种命名形式,这样看起来无疑是十分糟糕和头疼的,今天就拿出来一起总结一下。
一、单文件组件文件的大小写
单文件组件的文件名应该要么始终是单词大写开头(PascalCase),要么始终是横线连接(kebab-case)。例如这样:
components/
| - MyComponent.vue
或者是这样:
components/
| - my-component.vue
二、单例组件名
只应该拥有单个活跃实例的组件应该以 The前缀命名,以示其唯一性。 这不意味着组件只可用于一个单页面,而是每个页面只使用一次。这些组件永远不接受任何 prop,因为它们是为你的应用定制的。例如这类组件:
components/
|- TheHeading.vue
|- TheSidebar.vue
三、模版中的组件名大小写
对于绝大多数项目来说,在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。所以我认为最好的做法就是统一写成这个形式:
<my-component></my-component>
四、JS/JSX中的组件名大小写
JS/JSX 中的组件名应该始终是 PascalCase 的,尽管在较为简单的应用中只使用 Vue.component 进行全局组件注册时,可以使用 kebab-case 字符串。像下面这样:
Vue.component('MyComponent', {
// ...
})
Vue.component('my-component', {
// ...
})
import MyComponent from './MyComponent.vue'
export default {
name: 'MyComponent',
// ...
}
五、Prop名大小写
在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。在 JavaScript 中更自然的camelCase。而在 HTML 中则是 kebab-case。
props: {
greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
六、事件名
这个与之前介绍的组件和prop都不相同,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。 举个例子,如果触发一个 camelCase 名字的事件:
this.$emit('myEvent')
则监听这个名字的 kebab-case 版本是不会有任何效果的:
<my-component v-on:my-event="doSomething"></my-component>
vue官网是这样解释的:
不同于组件和 prop,事件名不会被用作一个 JavaScript 变量名或 property 名,所以就没有理由使用 camelCase 或PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
因此,我们推荐你始终使用kebab-case 的事件名。
这里我碰到一个问题,我将一个子组件的某个事件名写成这样(记为情况1):
this.$emit('myChange')
在父组件内写成这样:
<my-component v-on:myChange="doSomething"></my-component>
结果是:可以触发doSomething
另一种条件下,(记为情况2):
this.$emit('mychange')
<my-component v-on:myChange="doSomething"></my-component>
结果是:不可以触发doSomething
重新看一下vue官网中说到: v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的),所以v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
但是按照这个说法,结果应该是截然相反的才对…
补充
经过查阅一些博客发现了有这么一个解释:在于DOM模版和字符串模版。
字符串模板就是写在vue中的template中定义的模板,如.vue的单文件组件模板和定义组件时template属性值的模板。字符串模板不会在页面初始化参与页面的渲染,会被vue进行解析编译之后再被浏览器渲染,所以不受限于html结构和标签的命名。
dom模板就是写在html文件中,一打开就会被浏览器进行解析渲染的,所以要遵循html结构和标签的命名,否则浏览器不解析也就不能获取内容了。
七、做一些补充:
文件夹的命名:超过一个单词一般采用kebab-case命名形式
更多推荐
所有评论(0)