內心背景：今天偶然上到論壇，看到關于Vue的兩篇閱讀量破千，我TM膨脹了啊。趕快再寫一篇我開始用Vue時遇到的問題。

現實背景：很多時候我們會在全局調用一些方法。

實現方式兩種：官網的實現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文件會莫名其妙多很多代碼，自己看著也很難受啊。

這些也只是工作時看到的問題如果有什么不對的，也歡迎討論

總結

以上是生活随笔為你收集整理的vue暴露的全局方法_Vue中实现全局方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。