谈一谈Vue中组件的局部注册，全局注册

这里先以我们自定义的组件通用工具栏为例，通用工具栏设置在components下的文件夹下PageTools

现在我们要在多个页面使用这个组件，我们可以用局部注册和全局注册两种方法来引入页面中使用。

1.局部注册步骤 

局部注册思路，在要使用该组件的页面，引入，注册，使用

2.全局注册

全局注册思路，在main.js中直接注册全局 ，在要使用该组件的页面直接使用就好了

//  定义全局组件的格式
import 组件对象 from 'xxxxx.vue'
Vue.component('组件名', 组件对象)

//  定义局部组件的格式
import xxxx from 'xxxxx.vue'
export default {
	components: {
	   xxxx
	}
}

// 在main.js中注册PageTools组件
// 引入
import PageTools from '@/components/PageTools'
// 用Vue.component注册
Vue.component('PageTool', PageTools)

以上我们通过Vue.component全局api实现了全局注册，在业务组件中就不需要再引入和注册了，直接使用即可。

这种方式虽然可以非常方便的完成注册，但是大家想象一个场景，如果我们需要注册的全局组件非常多，我们需要一个一个引入，然后分别调用Vue.component方法，main.js文件会变的很大，不好维护，为了解决这个问题，我们学习一下插件的形式。

3.公共组件-Vue.use使用

提供统一注册的入口文件，这里我们在src/componets下创建index.js文件，在这个文件中引入要注册的组件

// 可以引入多个组件

import PageTools from './PageTools'
import xxxx from './xxxxx'
import........

export default {
  install(Vue) {
    Vue.component('PageTools', PageTools)
    Vue.component('xxxxxx', xxxxxxx)
    Vue.component()...// 可以注册多个组件
  }
}

然后在main.js中注册插件

import Components from './components'
Vue.use(Components)

用插件的形式降低了main.js中的代码量便于main.js文件的维护

以上是使用组件的几种方法，下面简单说一下Vue.use()的全局注册的原理

Vue.use()的全局注册的原理

Vue.use()它是Vue提供一个静态方法，用来向Vue注册插件(增强vue的功能)。

想必大家也都用过以下插件：

Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(vant)

原理

在Vue.use(obj)这个方法里，接收的参数是一个对象，对象obj中需要提供一个 install 函数，在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器，下面举一个例子

示例-install的参数及执行

在main.js中写入

// obj就是vue的插件
const obj = {
  install: function(Vue) {
    // console.log(abc === Vue)
    console.log('obj, install.....', Vue)
    Vue.prototype.abcd = 100
    Vue.prototype.$hello = () => {
      alert('vue')
    }
  }
}
// 加载插件
Vue.use(obj)

在测试组件中

注：其实elementUI的全局引入方法也是相同的逻辑。

想了解更多的去这里Vue官方文档: https://cn.vuejs.org/v2/api/#Vue-use