vue實(shí)現(xiàn)定義一個(gè)全局實(shí)例Vue.prototype
vue定義一個(gè)全局實(shí)例Vue.prototype
定義與使用
定義：
Vue.prototype.$appName = 'My App'
使用：
this.$appName （任何地方）
使用場(chǎng)景：
你可能會(huì)在很多組件里用到數(shù)據(jù)/實(shí)用工具，但是不想污染全局作用域。
這種情況下，你可以通過(guò)在原型上定義它們使其在每個(gè) Vue 的實(shí)例中可用
Vue.prototype.$appName = 'My App'
這樣 $appName 就在所有的 Vue 實(shí)例中可用了，甚至在實(shí)例被創(chuàng)建之前就可以。
如果我們運(yùn)行：
new Vue({
beforeCreate: function () {
console.log(this.$appName)
}
})則控制臺(tái)會(huì)打印出 My App。就這么簡(jiǎn)單！
為什么appName要以$開頭？這很重要嗎？它會(huì)怎樣？
$ 是在 Vue 所有實(shí)例中都可用的 property 的一個(gè)簡(jiǎn)單約定。
這樣做會(huì)避免和已被定義的數(shù)據(jù)、方法、計(jì)算屬性產(chǎn)生沖突。
vue定義全局方法的三種實(shí)現(xiàn)
方法一：使用Vue.prototype
//在mian.js中寫入函數(shù)
Vue.prototype.getToken = function (){
? ...
}
//在所有組件里可調(diào)用函數(shù)
this.getToken();方法二：使用exports.install+Vue.prototype
// 寫好自己需要的fun.js文件
exports.install = function (Vue, options) {
? ? Vue.prototype.getToken = function (){
? ? ? ?...
? ? };
};
// main.js 引入并使用
import fun from './fun'
Vue.use(fun);
//在所有組件里可調(diào)用函數(shù)
this.getToken();在用了exports.install方法時(shí)，運(yùn)行報(bào)錯(cuò)exports is not defined
解決方法：
export default {
? ? install(Vue) ?{
? ? ? ? Vue.prototype.getToken = {
? ? ? ? ? ?...
? ? ? ? }
? ? }
}方法三：使用全局變量模塊文件
Global.vue文件：
<script>
? ? const token='12345678';
? ? export default {
? ? ? ? methods: {
? ? ? ? ? ? getToken(){
? ? ? ? ? ? ? ? ....
? ? ? ? ? ? }
? ? ? ? }
? ? }
</script>在需要的地方引用進(jìn)全局變量模塊文件，然后通過(guò)文件里面的變量名字獲取全局變量參數(shù)值。
<script>
import global from '../../components/Global'//引用模塊進(jìn)來(lái)
export default {
? ? data () {
? ? ? ? return {
? ? ? ? ? ? token:global.token
? ? ? ? }
? ? },
? ? created: function() {
? ? ? ? global.getToken();
? ? }
}
</script>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
EventBus是一種發(fā)布/訂閱事件設(shè)計(jì)模式的實(shí)踐,下面這篇文章主要給大家介紹了關(guān)于vue3如何使用eventBus訂閱發(fā)布模式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vuex unknown action type報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了Vuex unknown action type報(bào)錯(cuò)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
有關(guān)vue 開發(fā)釘釘 H5 微應(yīng)用 dd.ready() 不執(zhí)行問(wèn)題及快速解決方案
這篇文章主要介紹了有關(guān)vue 開發(fā)的釘釘 H5 微應(yīng)用 dd.ready() 不執(zhí)行問(wèn)題及快速解決方案,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
這篇文章主要介紹了Vue模板內(nèi)引入的組件樣式覆蓋失效原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中{__ob__: observer}對(duì)象轉(zhuǎn)化為數(shù)組進(jìn)行遍歷方式
這篇文章主要介紹了vue中{__ob__: observer}對(duì)象轉(zhuǎn)化為數(shù)組進(jìn)行遍歷方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue的實(shí)例、生命周期與Vue腳手架（vue-cli）實(shí)例詳解
本文通過(guò)實(shí)例代碼+圖片描述的形式給大家介紹了Vue的實(shí)例、生命周期與Vue腳手架（vue-cli）知識(shí),需要的朋友可以參考下2017-12-12
Vue3計(jì)算屬性computed和監(jiān)聽屬性watch區(qū)別解析
計(jì)算屬性適用于對(duì)已有的數(shù)據(jù)進(jìn)行計(jì)算,派生新的數(shù)據(jù),并在模板中使用；而監(jiān)聽屬性適用于監(jiān)聽數(shù)據(jù)的變化,并執(zhí)行一些特定的操作,根據(jù)具體的需求和場(chǎng)景,選擇適合的機(jī)制這篇文章主要介紹了Vue3計(jì)算屬性computed和監(jiān)聽屬性watch,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了關(guān)于Vue組件間的常用傳參方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue下使用fullcalendar及簡(jiǎn)單案例,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例
這篇文章主要介紹了Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10