Vue组件注册
1. 组件命名方式
// 方式一
Vue.component('my-component-name', { /* ... */ })
<my-component-name>
// 方式二
Vue.component('MyComponentName', { /* ... */ })
<MyComponentName>
// 方式一 在DOM中可以直接用,是有效的元素
// 方式二 可用在单文件组件中(single-file component)
2. 全局注册VS局部注册
全局注册
组件注册后,可在全局使用,并且全局组件之间也可以相互嵌套着使用
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
局部注册
如下写法即局部注册组件
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
如要在组件b中使用组件a,要这样写:
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}
3. 模块系统
模块中局部注册组件
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
模块系统中全局注册常用的基础组件
在app的入口文件中使用 require.context 进行全局注册
(完)
原文出处:《2.1 组件注册》