vue组件全局注册和局部注册

全局注册

通过 Vue.component 来创建组件

1 2	Vue.component('component-a', { /* ... */ }) new Vue({ el: '#app' }) //挂载

组件在全局注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中

1
2
3

缺点：如果使用 webpack 这样的构建系统，全局注册所有的组件意味着即便不再使用一个组件了，它仍然会被包含在最终的构建结果中。会造成了用户下载的 JavaScript 的无谓的增加。

局部注册

通过一个普通的 JavaScript 对象来定义组件

1	var ComponentA = { /* ... */ }

然后在 components 选项中定义想要使用的组件

1
2
3
4
5
6

new Vue({
el: '#app',
components: {
'component-a': ComponentA,
}
})

注意：局部注册的组件在其子组件中不可用，解决方法如下
①

1
2
3
4
5
6
7
8

var ComponentA = { /* ... */ }

var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}

②通过 Babel 和 webpack 使用 ES2015 模块

1
2
3
4
5
6
7
8

import ComponentA from './ComponentA.vue'

export default {
components: {
ComponentA //等于ComponentA: ComponentA
},
// ...
}

模块系统

在模块系统中局部注册
创建一个 components 目录，并将每个组件放置在其各自的文件中。在局部注册之前导入每个想使用的组件。
例：ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用。

1
2
3
4
5
6
7
8
9
10
11

//在一个假设的 ComponentB.js 或 ComponentB.vue 文件中
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
components: {
ComponentA,
ComponentC
},
// ...
}

基础组件的自动化全局注册
基础组件：只是包裹了一个输入框或按钮之类的元素的组件，相对通用
缺点：会在各个组件中被频繁的用到，会导致很多组件里都会有一个包含基础组件的长列表，但只是用于模板中的一小部分

如果使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件
注意：全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

//应用入口文件 (比如 src/main.js) 中全局导入基础组件
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
// 其组件目录的相对路径
'./components',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式
/Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)

// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 获取和目录深度无关的文件名
fileName
.split('/')
.pop()
.replace(/\.\w+$/, '')
)
)

// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的，
// 那么就会优先使用 `.default`，
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})