Vue组件注册

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 组件注册》