Vue中全局變量的定義和使用
1.工作中遇到的兩類問題
--------------------------------------------------------------------------------
1.1 狀態(tài)值（標(biāo)志）
A界面賦值的a變量，作為記錄狀態(tài)值（標(biāo)志）需要被其他幾個(gè)界面使用。其他幾個(gè)界面亦可以改變a狀態(tài)值。
1.2 傳遞字段
A界面有a字段，B界面沒有a字段，但需要調(diào)用a字段。
2.解決方法
--------------------------------------------------------------------------------
2.1 VUEX
使用VUEX管理狀態(tài)與字段值，但有種殺雞用牛刀的感覺，稍微顯重了一點(diǎn)。
2.2 使用全局變量法管理狀態(tài)與字段值
輕量，簡單。
故本文使用全局變量法解決1中提出的兩個(gè)問題
3.具體實(shí)現(xiàn)
--------------------------------------------------------------------------------
3.1創(chuàng)建全局文件
在工具文件夾，創(chuàng)建glabal_val.js
3.2創(chuàng)建全局變量和設(shè)置全局變量的方法如下
export default{
sso_flag:"0",
set_sso_lag(sso_flag){
this.sso_flag = sso_flag;
}
}
3.3導(dǎo)入數(shù)據(jù)（全局變量）
import global from '@/utils/global_val'
3.4在 A界面設(shè)置全局變量的狀態(tài)位
global.set_sso_flag(1) 也可global.set_sso_flag=this.sso_flag直接進(jìn)行賦值
3.5在B界面判斷
在B界面DOM 標(biāo)簽里結(jié)合VUE的v-if,v-else-if指令進(jìn)行邏輯判斷
<div v-if="global.sso_flag==0"> </div> <div v-else-if="global.sso_flag==1"> </div>
總結(jié)
以上所述是小編給大家介紹的VUE中全局變量的定義和使用,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue3.0引入百度地圖并標(biāo)記點(diǎn)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue3.0引入百度地圖并標(biāo)記點(diǎn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
Vue2如何使用qrcode庫實(shí)現(xiàn)生成二維碼
在現(xiàn)代的前端開發(fā)中,二維碼生成是一個(gè)常見的需求,尤其是在需要快速分享信息等場景中,本文將詳細(xì)介紹如何在 Vue 2 項(xiàng)目中使用 qrcode 庫生成二維碼,感興趣的可以了解下2025-05-05
這篇文章主要介紹了vue中form表單禁用專用組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue-element-admin中node-sass換成dart-sass,安裝依賴報(bào)code?128多種問題的解決
這篇文章主要介紹了vue-element-admin中node-sass換成dart-sass,安裝依賴報(bào)code?128多種問題的解決方法,本文給大家分享問題原因分析及解決方法，需要的朋友可以參考下2023-02-02
vue踩坑記之npm?install報(bào)錯(cuò)問題解決總結(jié)
當(dāng)你跑起一個(gè)項(xiàng)目的時(shí)候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于vue踩坑之npm?install報(bào)錯(cuò)問題解決的相關(guān)資料,需要的朋友可以參考下2022-06-06
vue組件props不同數(shù)據(jù)類型傳參的默認(rèn)值問題
這篇文章主要介紹了vue組件props不同數(shù)據(jù)類型傳參的默認(rèn)值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vuex?是一個(gè)專為?Vue.js?應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化，這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下2023-01-01
vue3?element?plus按需引入最優(yōu)雅的用法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3?element?plus按需引入最優(yōu)雅的用法,以及關(guān)于Element-plus按需引入的一些坑,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
在vant 中使用cell組件 定義圖標(biāo)該圖片和位置操作
這篇文章主要介紹了在vant 中使用cell組件 定義圖標(biāo)該圖片和位置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了解決v-model雙向綁定失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04