自定义组件的全局注册

---

前言

有时候我们自己封装的自定义组件需要在很多页面中需要用到，每次都需要导入组件、注册组件、使用组件就会增加许多重复的代码，我们也可以像使用类似于使用ElementUI组件库一样，在全局注册我们封装的自定义组件

---

一、原理

通过Vue.use()方法注册全局组件时，会默认调用传入组件的install方法，在install方法的参数中可以拿到Vue实例

二、注册步骤

1.创建index.js文件

导入需要注册的自定义组件，默认导出包含install方法的对象，在install方法中注册组件：

// 负责所以自定义组件的全局注册
import PageTools from './PageTools'
export default {
  install(Vue) {
    Vue.component('PageTools', PageTools)
  }
}

2.全局引入自定义组件

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

3.直接使用组件

<page-tools :show-before="true">
    <template #before>
      首页信息
    </template>
 </page-tools>