全局引入方法一
在
src/utils/vue-use
目录下, 下面新建 plugins.js
// plugins.js
const fun = () => {
return "方法一";
}
function getRandColor() {
let tem = Math.round(Math.random() * colorListLength)
return colorList[tem]
}
const colorList = [
'#F9F900',
'#6FB7B7'
]
const colorListLength = 20
const obj = {
name: 'crj',
age: 18
}
export default {
fun,
getRandColor,
colorList,
colorListLength,
obj
}
全局引入,在入口文件main.js引入
import globalFun from "@/utils/vue-use/plugins"
Vue.prototype.$globalFun = globalFun
// 然后就可以全局使用plugins.js里面的方法了,
this.$globalFun.fun();
this.$globalFun.getRandColor()
this.$globalFun.colorList
this.$globalFun.colorListLength
this.$globalFun.obj
组件中引入
<script>
import globalFun from '@/utils/vue-use/plugins'
export default {
data () {
return {
getColor: globalFun.getRandColor
}
},
mounted() {
globalFun.fun()
globalFun.getRandColor()
globalFun.colorList
globalFun.colorListLength
globalFun.obj
},
}
</script>
全局引入方法二
在
src/utils/vue-use
目录下, 下面新建 commen.js
export default {
install(Vue, options) {
Vue.prototype.fun3 = function() {
console.log(options); // 结果:参数
return '方法三'
}
}
}
// 在入口文件main.js引入
import globalFun3 from "@/utils/vue-use/commen"
Vue.use(globalFun3, '参数');
// 然后就可以全局使用commen.js里面的方法了
this.fun3()
全局引入方法三
在
src/utils/vue-use
目录下, 下面新建 base.js
exports.install = function(Vue, options) {
Vue.prototype.text1 = function() { //全局函数1
alert('执行成功1');
};
Vue.prototype.text2 = function() { //全局函数2
alert('执行成功2');
};
};
// 在入口文件main.js引入
import base from '@/utils/vue-use/base' //引用
Vue.use(base); //将全局函数当做插件来进行注册
// 然后就可以全局使用base.js里面的方法了
this.text1()
this.text2()
Vue.use 介绍
在
src/utils/vue-use
目录下, 下面新建 plugins.js,index.js
// 文件: src/utils/vue-use/plugins.js
const Plugin1 = {
install(a, b, c) {
console.log('Plugin1 第一个参数:', a);
console.log('Plugin1 第二个参数:', b);
console.log('Plugin1 第三个参数:', c);
},
};
function Plugin2(a, b, c) {
console.log('Plugin2 第一个参数:', a);
console.log('Plugin2 第二个参数:', b);
console.log('Plugin2 第三个参数:', c);
}
export { Plugin1, Plugin2 };
// 文件: src/utils/vue-use/index.js
import Vue from 'vue';
import { Plugin1, Plugin2 } from './plugins';
Vue.use(Plugin1, '参数1', '参数2');
Vue.use(Plugin2, '参数A', '参数B');
// 然后我们在入口文件main.js引用这段代码
import Vue from 'vue';
import '@/classes/vue-use';
import App from './App';
Vue.config.productionTip = false;
new Vue({
el: '#app',
render: h => h(App),
});
全局模板
在
src/components/loading
目录下, 下面创建loading.vue
及index.js
文件
// loading.vue
<template>
<div class="loading-box">
Laoding...
</div>
</template>
// index.js
// 引入组件
import LoadingComponent from './loading.vue'
// 定义 Loading 对象
const Loading = {
// install 是默认的方法。当外界在 use 这个组件的时候,就会调用本身的 install 方法,同时传一个 Vue 这个类的参数。
install: function (Vue) {
Vue.component('Loading', LoadingComponent)
}
}
// 导出
export default Loading
全局引入,在入口文件main.js引入
import Loading from '@/components/loading/index'
Vue.use(Loading)
Vue.use 与 Vue.prototype 是vue注册插件的两种方式
相同处:实现的原理都是在Vue.prototype上添加了一个方法
不同处:Vue.prototype适合于注册vue生态外的插件 Vue.use适合于注册vue生态内的插件
vue.prototype.$xxx:
是在vue的原型链上挂在一个变量、
添加符号 $ 是防止被组件中的变量意外覆盖、
利用函数原型上的属性 / 方法在函数实例化后可以通过this.$xxx在任意实例上读取
Vue.use() 需要传入参数 Object 或 Function (前端通常是Object)
如果是 Object 那么这个 Object 需要定义一个 install 方法
如果是 Function 那么这个函数就被当做 install 方法
Vue.use() 需要在 new Vue() 之前完成
同一个插件多次使用Vue.use()也只会被运行一次
Vue.use主要是执行install方法,而install主要也是执行Vue.prototype方法。
所以,其实Vue.use()方法的核心就是Vue.prototype,只不过又封装了一层,更加的灵活,扩展性更好
理解:把vue理解成一棵树,Vue.use和Vue.prototype都是在这颗树上挂载插件的方式,不同之处是使用vue.prototype,插件不需要实现install方法,简单粗暴,拿来就用,但是灵活性不如Vue.use(), 而Vue.use(),却要求插件必须实现instal方法或者该插件本身就是函数,在install方法可以完成自己的逻辑, 所以Vue.use()的方式更加的强大,灵活,扩展性更好。
但是两者并没有高低之分, 只是有着各自的应用场景,Vue.prototype适合于非Vue生态的插件,而Vue.use()适合于Vue生态内的插件,两者互相配合,一个简单实用,一个灵活扩展性好。
而且,Vue.use的实现依赖于Vue.prototype,
最本质的理解就是Vue.use包裹着Vue.prototype进一步的封装了一次。