Vue.use 和 Vue.prototype 两种方式都可以引入插件,它们都是将 插件挂载到 Vue 的实例上,这样我们就可以在全局使用这个插件了
1、Vue.use()
它的参数是{ object | Function },如果参数是对象则必须提供 install 方法,如果参数是函数则将参数作为 install 方法,install 方法调用时会将 Vue 作为参数传入。Vue.use 会自动阻止多次引入相同插件,插件只会被安装一次。
创建一个 plugin.js 文件
let plug1 = {
//第一个参数是Vue 构造器,第二个可选参数
install(Vue,options){
Vue.prototype.$fn1 = function(){
console.log('这是插件1里面的方法');
}
}
}
function plug2(Vue,options){
Vue.prototype.$fn2 = function(){
console.log('这是插件2里面的方法');
}
}
export { plug1, plug2 }
在 main.js 里面引入 plugin.js
import Vue from 'vue';
import App from './App.vue';
import { plug1, plug2 } from './plugin';
Vue.use(plug1);
Vue.use(plug2);
new Vue({
el:'#app',
render: h => h(App)
})
然后再任意一个页面里面使用
mounted(){
this.$fn1(); //这是插件1里面的方法
this.$fn2(); //这是插件2里面的方法
},
上面的案例将 一个方法,一个对象通过 Vue.use 挂载到 Vue 的实例上面,在其他页面直接可以用 this 来调用 plug1 和 plug2 里面定义的方法。
注意: Vue.use 方法必须在 new Vue() 之前被调用。
2、Vue.portotype.xxx
你可能会在很多组件里用到数据/实用工具,但是不想污染全局作用域。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。
export function plug2(){
console.log('这是插件2里面的方法');
}
在main.js 里面引入
import Vue from 'vue';
import App from './App.vue';
import*as Plugin from './plugin';
Vue.prototype.$Plugin = Plugin;
new Vue({
el:'#app',
render: h => h(App)
})
在页面里面使用的话
this.$Plugin.plug2()
//这是插件2里面的方法
这样 plug2 方法就可以在全局使用了,甚至在实例被创建之前就可以
总结: 在使用专门为 vue 写的插件时使用 Vue.use() 来引入,其它的用 Vue.prototype.xxx 来引入。
原文链接:https://blog.csdn.net/weixin_43299180/article/details/112240753