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 进行全局注册
