快捷導(dǎo)航

Vue全局變量的定義及使用方法

更新時(shí)間：2023年09月25日 08:31:57 作者：藍(lán)胖子的多啦A夢(mèng)

這篇文章主要給大家介紹了關(guān)于Vue全局變量的定義及使用的相關(guān)資料,定義完全局變量后,我們可以在程序中的任何地方使用它們,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

首先 聲明Vue 使用全局變量的方法有很多，以下只是個(gè)人覺(jué)得比較簡(jiǎn)潔的2種。

其中兩者的第一步操作相同，即：

創(chuàng)建全局變量文件Global.vue，內(nèi)容如下：

<script>
    const name = 'ZhangSan'; //名稱
    const address = 'No.20, Taihu Road'; //地址
    export default {
        name,
        address
    }
</script>

方法1：在main.js中直接將全局變量掛載到Vue.prototype

import global from '../components/xx/Global'
Vue.prototype.GLOBAL = global;

用時(shí)不用任何多余操作，直接調(diào)用 this.GLOBAL.name 即可。

方法2：在需要使用全局變量的頁(yè)面引入global再使用

import global from '../components/xx/Global'

data() {
        return {
                userName: global.name,
                userAddress: global.address
        }
}

二第一步：?jiǎn)为?dú)新建一個(gè)全局變量模塊文件，模塊中定義一些變量初始狀態(tài)，用export default 暴露出去。

// 判斷是否顯示logoconst logo &#61; true;export default {<!-- -->  logo};

第二步：在main.js中引入，并通過(guò)Vue.prototype掛載到vue實(shí)例上面。供其他模塊文件使用；

// 判斷是否顯示logo
const logo = true;
export default {
  logo
};

第三步：在需要的模塊文件中引入并使用；

頁(yè)面使用

總結(jié)

到此這篇關(guān)于Vue全局變量的定義及使用的文章就介紹到這了,更多相關(guān)Vue全局變量使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue公共loading升級(jí)版解決思路(處理并發(fā)異步差時(shí)響應(yīng))
這篇文章主要介紹了Vue公共loading升級(jí)版（處理并發(fā)異步差時(shí)響應(yīng)）,解決思路是通過(guò)定義一個(gè)全局對(duì)象來(lái)存儲(chǔ)每個(gè)接口的響應(yīng)狀態(tài)，直到每個(gè)請(qǐng)求接口都收到響應(yīng)才變更狀態(tài)，結(jié)束loading動(dòng)畫，需要的朋友可以參考下
2023-11-11
如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能(代碼示例)
Vue是一種流行的JavaScript框架,可以幫助開(kāi)發(fā)者建立高效的Web應(yīng)用程序,本文將為您介紹如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能,并為您提供具體的代碼示例,感興趣的朋友一起看看吧
2023-11-11
Vue路由模式中的hash和history模式詳細(xì)介紹
VUE分為兩種路由模式分別是hash（哈希）和history，他們的區(qū)別是hash模式不會(huì)包含在http請(qǐng)求中，并且不會(huì)重新加載頁(yè)面，而使用history模式的話，如果前端的url和后端發(fā)起請(qǐng)求的url不一致的話，會(huì)報(bào)404錯(cuò)誤，所以使用history模式的話我們需要和后端進(jìn)行配合
2022-09-09
elementUI vue this.$confirm 和el-dialog 彈出框移動(dòng) 示例demo
這篇文章主要介紹了elementUI vue this.$confirm 和el-dialog 彈出框移動(dòng) 示例demo，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07
Vue中$attrs與$listeners的使用教程
這篇文章主要介紹了Vue中$attrs與$listeners的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-11-11
vue.js Router嵌套路由
這篇文章主要介紹vue.js Router嵌套路由,平時(shí)訪問(wèn)首頁(yè),里面有新聞?lì)惖?home/news,還有信息類的/home/message這時(shí)候就需要使用到嵌套路由,下面我們就來(lái)具體學(xué)習(xí)嵌套路由的原理,需要的朋友可以參考一下
2021-10-10
vue3??mixin?混入使用方法
這篇文章主要介紹了?vue3??mixin?混入使用方法，mixin?混入，提供了一種非常靈活的方式，來(lái)分發(fā)?vue?組件中的可復(fù)用功能，一個(gè)mixin?對(duì)象可以包含任意組件選項(xiàng)，當(dāng)組件使用?mixin?對(duì)象時(shí)，所有的?mixin?對(duì)象的選項(xiàng)將被混入組件本身的選項(xiàng)。,需要的朋友可以參考一下
2021-11-11
Vue綁定對(duì)象與數(shù)組變量更改后無(wú)法渲染問(wèn)題解決
這篇文章主要介紹了Vue綁定對(duì)象與數(shù)組變量更改后無(wú)法渲染問(wèn)題解決,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
vue3中keep-alive和vue-router的結(jié)合使用方式
這篇文章主要介紹了vue3中keep-alive和vue-router的結(jié)合使用方式，?具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
詳解Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP
這篇文章主要介紹了詳解Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06