Vue 组件注册方式

写在前面

不管是 Vue 仍是 React，都有组件的概念。组件，顾名思义就是能和别人组合在一块儿的物件。在前端页面开发过程当中，将一个页面划分红一个个小的模块，每一个模块单独定义，每一个模块就是一个组件。组件还能够进行复用，A 页面和 B 页面有一个类似的模块，能够抽离成一个可局部修改的组件。

组件化的概念让前端页面开发有了更清晰的结构。

Vue 中的组件就是一个 Vue 的实例对象。所以，Vue 组件的构造选项和 new Vue() 方法构造 Vue 实例的构造选项是同样的，其可接收的构造选项都是同样的。除了 el 这样 根实例 特有的选项。可是，Vue 组件必须得是能够复用的，所以，就必需要求构造选项中的 data 选项必须是一个函数，该函数返回一个对象。

为何 data 选项是个返回对象的函数就能够保证组件的可复用性呢？

由于不管是 new Vue() 的方式仍是定义 Vue组件 的方式建立一个 Vue 实例，其执行的操做都是将构造选项中的各属性值直接赋值给新建立的 Vue 实例对象。组件复用就是 Vue 使用 相同的构造选项 构造出多个同名不一样地址的 Vue 实例对象。若是 Vue 组件定义时的构造选项中的 data 选项是一个对象，那么在组件复用时，多个组件就会共用一个 data 数据对象，由于是直接将 data 对象的地址赋值给组件的 Vue 实例的。但若是组件定义时的 data 选项是一个函数的话，那么 Vue 根据构造选项建立组件时会执行该函数从而获得一个对象。这样一来，每次建立 Vue 实例时的 data 对象都是从新生成的，所以，多个组件都有各自的 data 数据对象，不会相互影响。

实际上，在组件注册时是在定义组件的构造选项，在组件使用时才真正建立对应的 Vue 组件实例。

1 全局注册

全局注册的组件能够在 Vue 根实例和全部的子组件中使用。注册入口为Vue.component()函数，一次注册，随时使用，注册方式以下：

Vue.component('my-component-name',{ 
    options 
})

示例以下：

//main.js
//此示例是在 vue-cli 建立的项目，默认是非完整版vue，没法用 template 选项，所以使用 render 函数写组件内容。
Vue.component('all-test',{
  data(){
    return {
      x: '我是全局组件'
    }
  },
  render(h){
    return h('div',this.x)
  }
})

//全局注册的组件直接使用便可
//App.vue
<template>
  <div id="app">
    <all-test />
  </div>
</template>

2 局部注册

局部注册是经过一个普通的 JavaScript 对象来定义组件。而后组件的命名和注册入口是在 Vue实例 构造选项中的 components 选项。

let component = { options }

//new Vue 建立的根元素 Vue 实例
new Vue({
    el: '#app'
    components: {
        'my-component-name': component
    }
})

//或注册 Vue组件 建立的 Vue 实例
export default {
    components: {
        'my-component-name': component
    }
}

示例以下：

//App.vue
<template>
  <div id="app">
    <all-test />
    <component-a />
    <component-b />
  </div>
</template>

<script>
let ComponentA = {
  data(){
    return {
      x: '我是局部组件 A'
    }
  },
  render(h){
    return h('div',this.x)
  }
}

export default {
  name: 'App',
  components: {
    'component-a': ComponentA,
    'component-b': {
        data(){
          return {
            x: '我是局部组件 B'
          }
        },
        render(h){
          return h('div',this.x)
        }
    } 
  }
}
</script>

3 模块系统中局部注册

在使用了诸如 Babel 和 webpack 的模块系统中可使用 import 和 export 的方式单独导入组件的构造选项对象 或者 导入对应构造选项的 *.vue 文件。

//c.js
export default {
    data(){
        return {
          x: '我是 c.js 文件单独导出的组件构造选项对象'
        }
      },
      render(h){
        return h('div',this.x)
      }
}

//D.vue
<template>
    <div>
        {{x}}
    </div>
</template>

<script>
export default {
    data(){
        return {
            x: '我是 D.vue 文件导出的组件'
        }
    }
}
</script>

//App.vue
<template>
  <div id="app">
    <C />
    <D />
  </div>
</template>

import C from './c.js'
import D from './components/D.vue'

export default {
  name: 'App',
  components: {
    C,
    D 
  }
}
</script>