vue中全局注册和局部注册

全局注册

//在main.js中全局注册
import Vue from 'vue'

//导入在components中创建的复用组件
import pageTools from '@/components/PageTools/index.vue'
//我们通过Vue.component全局api实现了全局注册，在业务组件中就不需要再引入和注册了，直接使用即可
//这里的Vue必须要使用大写
Vue.component('pageTools',pageTools)

const obj ={
  install(qwe){
    //方法名称必须为install,且里面的形参===Vue,返回的结果是true
    console.log('install.....', qwe===Vue)
  }
}
//静态方法构造器后面加个点
Vue.use(obj)

Vue.prototype.good = 'hao'
//原型链的应用
在组件中log这个this  可以从Vuecompnent中的[[Prototype]]: Vue里面的
[[Prototype]]: Object里面的good: "hao"找到自己的方法

以上这种方法,假如有一千个插件,一万个插件,代码就会变得很笨重,维护性变差.所以在有以下的方法来解决此问题.

1.1在components中创建的一个index.js文件

1.2在index.js中导入要使用的插件名称   并导出一个install方法 //固定写法

1.3.在main.js中导入index.js文件

1.4Vue.use(导入的名称) 传值给install的形参

这个是index.js


import pageTools from '@/components/PageTools/index.vue'
//我们通过Vue.component全局api实现了全局注册，在业务组件中就不需要再引入和注册了，直接使用即可
//这里的Vue必须要使用大写
export default {
  install(Vue){   //方法名称必须为install   里面的形参随便写,最后都会被main.js里面的vue.use() 传参
    Vue.component('pageTools',pageTools)
  }
}

这个是main.js

import Cindex from '@/components/index.js'
//这里传值给index.js里的install, 即可在全局使用此插件
Vue.use(Cindex)  

局部注册

<template>
  <div class="department-container">
    <div class="app-container">
//第三步直接使用
        <PageTools title="总数据10086条">
            <el-button type="warning" plain>导入</el-button>
            <el-button type="danger" plain>导出</el-button>
          </PageTools>
    </div>
  </div>
</template>

<script>
//第一步导入
import PageTools from '@/components/PageTools/index.vue'
export default {
//第二部注册
  components:{PageTools}
}
</script>

<style>

</style>