Vue 组建注册

组建名

关于 Vue 的组建名特别是全局组件的注册格式：

1
2
3

Vue.component('components-name', {
    // ……
})

其中在全局组件注册中第一个参数是全局组件的名称，而第二参数则为组件中的code。

组件名的命名方式

组建名的定义主要命名方式为 kebab-case即“短横线分割命名方法”还有驼峰式命名，他们的命名方式主要体现在：

1
2
3

Vue.component("component-name", {
    // ……
})

以及驼峰式命名方法：

1
2

Vue.component("componentName" , {
})

短横线命名以及驼峰式命名主要区分在component-name和componentName，通常使用短横线明明更加的明显但在一些语言中并不支持，所以驼峰式命名方法受众更多。

在官方文档中，虽然短横线分割以及驼峰式命名方式都会被接受，但是直接在DOM中使用时只支持以短横线分割即Kebab-case是有效的

全局注册与局部注册

全局注册

通过全局注册通常会使用Vue.component来创建一个全局组件即：

1
2
3

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

在他们注册之后可以用在任何新的Vue实例中，就比如：

1
2
3
4
5
6
7
8
9
10

Vue.component('componente-one', {
    // …… 
})
Vue.component('componente-two', {
    // …… code
})

new Vue ({
    el: '#app'
})

之后可以可以用过使用下放实例直接使用刚刚所注册的全局组件:

1
2
3
4

<div id="id">
    <componente-one></componente-one>
    <componente-two></componente-two>
</div>

局部注册

全局注册通常往往都不会是太于理想的，如果你有很多的组件，但是你用到的只有那一两个，则会造成很多的代码行数增加（经管全局注册的初始结构会比局部注册的少几行），通过局部注册，即有多少，注册多少，但全局注册则是尽管来，趁热，来者不惧的的方式进行组件的注册。通过上述的对比我们可以更快的理解全局注册与局部注册相互之间的差异以及区别，读者可根据在开发项目中时自行进行使用两种方法来构建一个项目。