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

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

<template>
  <div class="department-container">
    <div class="app-container">

      <div class="page-tools">
        <div class="left">
          <div class="tips">
            <i class="el-icon-info" />
            <slot name="left">
              文字区域
            </slot>
          </div>
        </div>
        <div class="right">
          <slot name="right">
            按钮区域
          </slot>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.page-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tips {
    line-height: 34px;
    padding: 0px 15px;
    border-radius: 5px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
    i {
      margin-right: 10px;
      color: #409eff;
    }
  }
}
</style>

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

1.局部注册步骤 

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

<template>
  <div class="employees-container">
    <div class="app-container">
       // 使用
      <page-tools>
        <!-- 插入到left插槽位置 -->
        <template #left>
          <span>本月: 社保在缴 公积金在缴</span>
        </template>
         <!-- 插入到right插槽位置 -->
        <template #right>
          <el-button type="warning" size="small">导入excel</el-button>
          <el-button type="danger" size="small">导出excel</el-button>
          <el-button type="primary" size="small">新增员工</el-button>
        </template>
      </page-tools>
    </div>
  </div>
</template>
<script>
  // 引入
  import PageTools from '@/components/PageTools'
  export default {
  // 注册
      components:{
         PageTools
      }
  }
</script>

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)

在测试组件中

<template>

 <div>
      <el-button type="text" size="small" @click="htest">测试</el-button>
 </div>

</template>

<script>

export default {

  methods: {
    hTest() {
      console.log(this)
      console.log(this.abcd)  //结果是100
      this.$hello()  // 弹出窗口
    }
  }
}
</script>

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

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