注册

本节目标：理解“注册”的核心思路，并能把它用于实际开发或面试表达。 一、全局注册 ==使用== Vue.component ==来创建组件。== ==它们在注册之后可以用在任何新创建的== Vue ==根实例==

 (new Vue)

==的模板中。比如：==

Vue.component('my-component-name', {

// ... ==选项==

 ...})

==这些组件是====全局注册的====。==

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>

==在所有子组件中也是如此，也就是说这三个组件==在各自内部==也都可以相互使用。==

==二、局部注册== ==背景：如果使用==

 webpack

==进行构建，那么全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的== JavaScript ==的无谓的增加。== ==局部注册方式：==

==先定义一个对象，这个对象包含定义一个组件的必要属性；==
==然后在== components ==选项中定义你想要使用的组件；==
==对于== components ==对象中的属性名就是自定义组件的名字，其属性值就是这个组件的选项对象：==

var ComponentA = { /* ... */ }var ComponentB = { /* ... */ }var ComponentC = { /* ... */ }
new Vue({  el: '#app',  components: {    'component-a': ComponentA,    'component-b': ComponentB  }})

注意：==局部注册的组件在其子组件中==不可用==。例如，如果你希望== ComponentA ==在== ComponentB ==中可用：== ==则你需要这样写：==

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

==或者如果你通过== Babel ==和== webpack ==使用== ES2015 ==模块，那么代码看起来更像：==

import ComponentA from './ComponentA.vue'
export default {  components: {    ComponentA  },  // ...}

在模块系统中局部注册 ==推荐创建一个== components ==目录，并将每个组件放置在其各自的文件中。== ==然后你需要在局部注册之前导入每个你想使用的组件。== ==例如，在一个假设的== ComponentB.js ==或== ComponentB.vue ==文件中：==

import ComponentA from './ComponentA'import ComponentC from './ComponentC'
export default {  components: {    ComponentA,    ComponentC  },  // ...}

==现在== ComponentA ==和== ComponentC ==都可以在== ComponentB ==的模板中使用了。==

基础组件的自动化全局注册 ==一些通用和常用的====基础组件====，会在各个组件中被频繁的用到。如果局部注册，会导致很多组件里都会有一个包含基础组件的长列表：==

import BaseButton from './BaseButton.vue'import BaseIcon from './BaseIcon.vue'import BaseInput from './BaseInput.vue'
export default {  components: {    BaseButton,    BaseIcon,    BaseInput  }}

==而只是用于模板中的一小部分：==

<BaseInput  v-model="searchText"  @keydown.enter="search"/><BaseButton @click="search">  <BaseIcon name="search"/></BaseButton>

==如果你恰好使用了== webpack (==或在内部使用了== webpack ==的==

Vue CLI 3+)

==，那么就可以使用== require.context ==只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件== (==比如==

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
  )
})

==记住====全局注册的行为必须在根== Vue ==实例== (==通过==

new Vue)

==创建之前发生====。====这里====有一个真实项目情景下的示例。== > 来自

 <https://cn.vuejs.org/v2/guide/components-registration.html>

注册 ​

注册