Vue全局變量的定義及使用方法
更新時(shí)間：2023年09月25日 08:31:57 作者：藍(lán)胖子的多啦A夢
這篇文章主要給大家介紹了關(guān)于Vue全局變量的定義及使用的相關(guān)資料,定義完全局變量后,我們可以在程序中的任何地方使用它們,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
首先 聲明Vue 使用全局變量的方法有很多，以下只是個(gè)人覺得比較簡潔的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：在需要使用全局變量的頁面引入global再使用
import global from '../components/xx/Global'
data() {
return {
userName: global.name,
userAddress: global.address
}
}二 第一步：單獨(dú)新建一個(gè)全局變量模塊文件，模塊中定義一些變量初始狀態(tài)，用export default 暴露出去。
// 判斷是否顯示logoconst logo = true;export default {<!-- --> logo};
第二步：在main.js中引入，并通過Vue.prototype掛載到vue實(shí)例上面。供其他模塊文件使用；
// 判斷是否顯示logo
const logo = true;
export default {
logo
};第三步：在需要的模塊文件中引入并使用；
頁面使用
總結(jié)
到此這篇關(guān)于Vue全局變量的定義及使用的文章就介紹到這了,更多相關(guān)Vue全局變量使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解vue2.0 不同屏幕適配及px與rem轉(zhuǎn)換問題
這篇文章主要介紹了詳解vue2.0 不同屏幕適配及px與rem轉(zhuǎn)換問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
本文主要介紹了vuex刷新頁面丟失登錄token信息的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了vue-router的兩種模式的區(qū)別，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue-next-admin項(xiàng)目使用cdn加速詳細(xì)配置
這篇文章主要為大家介紹了vue-next-admin項(xiàng)目使用cdn加速的詳細(xì)配置，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
關(guān)于vue打包時(shí)的publicPath就是打包后靜態(tài)資源的路徑問題
這篇文章主要介紹了vue打包時(shí)的publicPath，就是打包后靜態(tài)資源的路徑,本文通過三種情況分析給大家詳細(xì)介紹，需要的朋友可以參考下2022-07-07
這篇文章主要為大家介紹了Vue3組件間傳值避坑方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Vue實(shí)現(xiàn)開始時(shí)間和結(jié)束時(shí)間范圍查詢
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)開始時(shí)間和結(jié)束時(shí)間的范圍查詢，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
本文主要介紹了VUE3中watch和watchEffect的用法詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了vue不同方法跳轉(zhuǎn)頁面，本文給大家分享多種方法，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
本次小編通過一個(gè)簡單的實(shí)例來教給大家如何寫一個(gè)vue插件，以及需要注意的地方，如果有需要的讀者跟著學(xué)習(xí)一下吧。2017-11-11