vue.use()的使用和原理
参考:https://blog.csdn.net/lhjuejiang/article/details/110667201
vue.use 的使用和原理
1. 官方解释
Vue.use( plugin )
参数:{Object | Function} plugin
用法:安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。
该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用,插件将只会被安装一次。
以上就是非人类语言,下面我们使用人类语言具体说一下。
2. 实例解析
实例:(Element组件调用)
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)
可以看到,我们在安装完组件以后使用 use 就能完成组件注册使用,官方叫“组件挂载”。
那是怎么挂载的呢?
其实在组件代码中会有类似这样的部分:
import Icon from '../components/icon/index'
const IconConponents = {
install: function (Vue) { // install 是默认的方法。当外界在 use 这个组件的时候,就会调用本身的 install 方法,同时传一个 Vue 这个类的参数。
Vue.component('Icon', Icon)
}
}
// 导出
export default IconConponents
注意代码中的install
,他的作用是“install 是默认的方法。当外界在 use 这个组件的时候,就会调用本身的 install 方法,同时传一个 Vue 这个类的参数。
”
我们再看,main.js 引入时:
import Icon from './global'
Vue.use(Icon)
仔细看,其实际就是3步实现:
- 外界
use
引入组件,触发内部install
方法,并且传了一个Vue对象; - 进入以后通过
component
注册一个全局组件(全局组件知识点); - 最后,外部就可以全局使用组件了。
全局使用:
<Icon type="arrow-left" color="red" size="28"></Icon>
以上就是 use 的基本原理,当然还有比较复杂的,但基本运行机制就是这样。
3. 浅谈全局注册组件
- 引入 Vue 对象
- 引入 loading 组件
- 将 loading 注册为全局组件,在别的组件中通过标签使用Loading组件
import Vue from 'vue';
import Loading from './loading.vue';
Vue.component('loading', Loading);