Vue笔记_Vue.use使用原理

语法

Vue.use( plugin )

• 参数：

  • {Object | Function} plugin

    如果插件是一个对象，该对象必须提供 install 方法；

    如果插件是一个函数，它会被作为 install 方法；

    • 注意

      install 方法调用时，会将 Vue 作为参数传入；

      当 install 方法被同一个插件多次调用，插件将只会被安装一次

使用

Vue.use使用时实际是调用了该插件的install方法!

举例说明-ElementUI引入

ElementUI插件含有install方法，所以我们在引入ElementUI时需要使用Vue.use去引入；

import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)

举例说明-组件封装

编写组件通过vue.use()使用

• 组件-global.js

  import Icon from '../components/icon/index'
  const IconConponents = {
    install: function (Vue) {
      Vue.component('Icon', Icon)
    }
  }
  export default IconConponents
  

• main.js中

  import Vue from 'Vue'
  import Icon from './global'
  Vue.use(Icon)
  

相当于-直接在main.js中

import Vue from 'Vue'
import Icon from '../components/icon/index'
Vue.component('Icon', Icon)

然后就可以全局使用Icon组件了

 <Icon type="arrow-left" color="red" size="28"></Icon>