現實背景:很多時候我們會在全局調用一些方法。
實現方式兩種:官網的實現use方法,然后你也可以用野路子直接在Vue.prototype上面定義。
先說野路子,因為其實野路子就是最根本的實現方式,官方的use實現也是一樣的,只是use很好的封裝了。
/*
*main.js中實例Vue時添加方法
*/
import Vue from 'vue';
//這樣以后你就可以在該項目下的其他組件中使用hello了,直接調用 this.hello('正字表達獅')。
Vue.prototype.hello = function(name){
console.log(`hello ${name}`)
}
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
原理很簡單,因為Vue實質上就是一個對象。大多數對象都會存在原型對象,在Vue原型上添加了方法之后,new Vue()實例化時vm就繼承了該方法。因為其他組件也會繼承vm所以所有的組件都可以調用該方法。接下來看看Vue.use()。
首先我新建一個deta.js。里面封裝一個對象。
const date = {
tickToLong(tick) {
let seconds = tick / 1000;
let h = Math.floor(seconds / 60 / 60);
let m = Math.floor((seconds - 60 * 60 * h) / 60);
let s = Math.floor(seconds - 60 * 60 * h - 60 * m);
return h + ':' + m + ':' + s
},
tickToTime(tick){
let date = new Date(tick);
let h = date.getHours() > 9 ? date.getHours() : '0' + date.getHours();
let i = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes();
let s = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds();
return h+':'+i+':'+s
}
}
const install = function(vm, options) {//插件必須有這樣一個install方法。
vm.prototype._date = date;
}
export default { install }
可以看到里面有一個install方法,然后將該方法暴露出來。install方法是必須的,可看官網use相關部分。我們發現install里面其實就是我們野蠻的第一中種方式。install當中的vm實際上就是Vue這個對象。所以本質上兩種方式都是在vue原型上面添加了方法。當然建議大家在工作中不要使用第一種方法。因為別人會覺得你很low啊,而且你的main文件會莫名其妙多很多代碼,自己看着也很難受啊。
但是由於模塊比較多,我對於每個模塊分配了不同的組件,發現一個項目中有許多相同的方法,
在每個組件中我都需要進行重復的編寫。
所以,我希望能夠將這些公共的方法,抽離出來放到同一個 js 中,這里就取名 util.js

3、實現方法
1、方法一
暴露接口的方式,直接在組件中進行引用
首先在 util.js 單獨文件中寫兩個方法:

在組件中引用,測試了無法在 main.js 中全局引用(有方法請告訴我):
import {a,b} from '../static/js/util.js'
調用:
test: function() { a(); b(); }
2、方法二:
將公共方法集成到 Vue 原型上,Vue.prototype.name
首先在 util.js 中寫方法:

在 main.js 中進行全局引用:

調用:
this.adminApi.a(); this.adminApi.b();
