Vue全局變量的定義及使用方法
更新時間：2023年09月25日 08:31:57 作者：藍胖子的多啦A夢
這篇文章主要給大家介紹了關于Vue全局變量的定義及使用的相關資料,定義完全局變量后,我們可以在程序中的任何地方使用它們,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
首先 聲明Vue 使用全局變量的方法有很多，以下只是個人覺得比較簡潔的2種。
其中兩者的第一步操作相同，即：
創(chuàng)建全局變量文件Global.vue，內容如下：
<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;
用時不用任何多余操作，直接調用 this.GLOBAL.name 即可。
方法2：在需要使用全局變量的頁面引入global再使用
import global from '../components/xx/Global'
data() {
return {
userName: global.name,
userAddress: global.address
}
}二 第一步：單獨新建一個全局變量模塊文件，模塊中定義一些變量初始狀態(tài)，用export default 暴露出去。
// 判斷是否顯示logoconst logo = true;export default {<!-- --> logo};
第二步：在main.js中引入，并通過Vue.prototype掛載到vue實例上面。供其他模塊文件使用；
// 判斷是否顯示logo
const logo = true;
export default {
logo
};第三步：在需要的模塊文件中引入并使用；
頁面使用
總結
到此這篇關于Vue全局變量的定義及使用的文章就介紹到這了,更多相關Vue全局變量使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue公共loading升級版解決思路(處理并發(fā)異步差時響應)
這篇文章主要介紹了Vue公共loading升級版（處理并發(fā)異步差時響應）,解決思路是通過定義一個全局對象來存儲每個接口的響應狀態(tài)，直到每個請求接口都收到響應才變更狀態(tài)，結束loading動畫，需要的朋友可以參考下2023-11-11
Vue是一種流行的JavaScript框架,可以幫助開發(fā)者建立高效的Web應用程序,本文將為您介紹如何在Vue中實現(xiàn)登錄驗證功能,并為您提供具體的代碼示例,感興趣的朋友一起看看吧2023-11-11
VUE分為兩種路由模式分別是hash（哈希）和history，他們的區(qū)別是hash模式不會包含在http請求中，并且不會重新加載頁面，而使用history模式的話，如果前端的url和后端發(fā)起請求的url不一致的話，會報404錯誤，所以使用history模式的話我們需要和后端進行配合2022-09-09
elementUI vue this.$confirm 和el-dialog 彈出框 移動 示例demo
這篇文章主要介紹了elementUI vue this.$confirm 和el-dialog 彈出框 移動 示例demo，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了Vue中$attrs與$listeners的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
這篇文章主要介紹vue.js Router嵌套路由,平時訪問首頁,里面有新聞類的/home/news,還有信息類的/home/message這時候就需要使用到嵌套路由,下面我們就來具體學習嵌套路由的原理,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了?vue3??mixin?混入使用方法，mixin?混入，提供了一種非常靈活的方式，來分發(fā)?vue?組件中的可復用功能，一個mixin?對象可以包含任意組件選項，當組件使用?mixin?對象時，所有的?mixin?對象的選項將被混入組件本身的選項。,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了Vue綁定對象與數組變量更改后無法渲染問題解決,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
vue3中keep-alive和vue-router的結合使用方式
這篇文章主要介紹了vue3中keep-alive和vue-router的結合使用方式，?具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解Vue webapp項目通過HBulider打包原生APP
這篇文章主要介紹了詳解Vue webapp項目通過HBulider打包原生APP，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06