高手手把手教你Vue.use()的基本应用

vue.use()在vue中经常使用，比如ElementUl，Router，Vuex等组件在引用后都会使用Vue.use将他们传入作为参数使用，现在来简介一下vue.use()的基本使用。

vue官方给的文档说明：

安装vue.js插件。如果插件是一个对象，必须使用install方法。如果插件是一个函数，它会被作为install方法。install方法调用时，会将Vue作为参数传入。

简而言之：1.当参数为函数时，函数的参数是Vue对象 2.当参数为对象时，它提供的install方法中参数时Vue对象。

例1（当参数为函数时）：

// 新建一个 index.js ，尝试参数为函数时 Vue.use() 的情况 ，index.js文件内容如下
// 注册全局组件
import PageTools from '@/components/PageTools/index.vue'
export default {
  function component (Vue) {
    // 组件名 组件对象
    Vue.component('PageTools', PageTools)
  }
}

// 之后在main.js引入index.js，并且使用 Vue.use() 调用
import component from '@/components/index'
Vue.use(component)

例2 （当参数为对象时）：

// 新建一个 index.js ，尝试参数为函数时 Vue.use() 的情况 ，index.js文件内容如下
// 注册全局组件
import PageTools from '@/components/PageTools/index.vue'
export default {
  install(Vue) {
    // 组件名 组件对象
    Vue.component('PageTools', PageTools)
  }
}

// 之后在main.js引入index.js，并且使用 Vue.use() 调用
import component from '@/components/index'
Vue.use(component)

拓展（按需要传入自定义参数）

const demo = {
    install: (Vue,a,b,c) => {
        console.log('obj', Vue,a,b,c)
    }
}
export default demo

// 在main.js引入demo.js，并且使用 Vue.use() 调用
import demo from '@/components/demo.js'
Vue.use(demo，1,2,{name:'小明'})

 这就是Vue.use()的基本使用。