1、官方文档说明:https://cn.vuejs.org/v2/api/#Vue-use
2、找到源码看
Vue.use(plugin)
这个plugin,要么是包含install方法的对象,要么本身就是一个函数。第一个参数始终是Vue对象。
function initUse (Vue) {
Vue.use = function (plugin) {
var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
if (installedPlugins.indexOf(plugin) > -1) { // 判断插件有没有被注册
return this
}
// additional parameters
var args = toArray(arguments, 1);
args.unshift(this); //this 指向 Vue 对象,所以数组参数第一个始终是vue对象
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args); // 整理好的数组参数传给install方法,this指向为plugin自己
} else if (typeof plugin === 'function') {
plugin.apply(null, args); // plugin是函数的话 ,直接调用,传入参数。注意:其内this为null
}
installedPlugins.push(plugin);
return this
};
}
/**
* Convert an Array-like object to a real Array.
*/
function toArray (list, start) {
start = start || 0;
var i = list.length - start;
var ret = new Array(i);
while (i--) {
ret[i] = list[i + start];
}
return ret
}
3、通过上面可知编写插件的两种方法,使用:
1)、包含install方法的对象(推荐),逻辑性比较强的比较适合, 编写灵活,拓展性也高, 最后通过install方法暴露给Vue对象
const plugin = {
//this 指向plugin对象本身
install() {
// 巴拉巴拉一系列操作
let conso = this.handleConsole()
console.log(this.handleConsole)
console.log(conso)
console.log(this.data)
},
handleConsole() {
console.log('handleConsole');
let comdata = '吃葡萄不吐葡萄皮'
return comdata
},
data: [1,2,3]
}
export default plugin
浏览器打印:
2)、一个函数,适合普通简单的
// 比如自定义全局组件,统一一个文件
// globalComponents.js
import Vue from 'vue';
import pHeader from './components/pheader'
import pFooter from './components/pfooter'
function plugin() {
//this 为null
Vue.component('pHeader', pHeader);
Vue.component('pFooter', pFooter);
}
export default plugin
//使用 main.js
import Vue from 'vue'
import GlobalComponents from './globalComponents'
Vue.use(GlobalComponents);
// 然后就可以全局使用自定义的组件了。
4、还有个问题:
该方法需要在调用 new Vue() 之前被调用。那么为什么要在之前调用的?
简单的理解:如果在new Vue() 之后调用,那么你的插件的内容就来不及添加到Vue中。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。