Vue中全局变量的定义和使用
1.工作中遇到的两类问题
--------------------------------------------------------------------------------
1.1 状态值（标志）
A界面赋值的a变量，作为记录状态值（标志）需要被其他几个界面使用。其他几个界面亦可以改变a状态值。
1.2 传递字段
A界面有a字段，B界面没有a字段，但需要调用a字段。
2.解决方法
--------------------------------------------------------------------------------
2.1 VUEX
使用VUEX管理状态与字段值，但有种杀鸡用牛刀的感觉，稍微显重了一点。
2.2 使用全局变量法管理状态与字段值
轻量，简单。
故本文使用全局变量法解决1中提出的两个问题
3.具体实现
--------------------------------------------------------------------------------
3.1创建全局文件
在工具文件夹，创建glabal_val.js
3.2创建全局变量和设置全局变量的方法如下
export default{
sso_flag:"0",
set_sso_lag(sso_flag){
this.sso_flag = sso_flag;
}
}
3.3导入数据（全局变量）
import global from '@/utils/global_val'
3.4在 A界面设置全局变量的状态位
global.set_sso_flag(1) 也可global.set_sso_flag=this.sso_flag直接进行赋值
3.5在B界面判断
在B界面DOM 标签里结合VUE的v-if,v-else-if指令进行逻辑判断
<div v-if="global.sso_flag==0"> </div> <div v-else-if="global.sso_flag==1"> </div>
总结
以上所述是小编给大家介绍的VUE中全局变量的定义和使用,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要介绍了vue3.0引入百度地图并标记点,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
在现代的前端开发中,二维码生成是一个常见的需求,尤其是在需要快速分享信息等场景中,本文将详细介绍如何在 Vue 2 项目中使用 qrcode 库生成二维码,感兴趣的可以了解下2025-05-05
这篇文章主要介绍了vue中form表单禁用专用组件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
vue-element-admin中node-sass换成dart-sass,安装依赖报code 128多种问题的解决
这篇文章主要介绍了vue-element-admin中node-sass换成dart-sass,安装依赖报code 128多种问题的解决方法,本文给大家分享问题原因分析及解决方法，需要的朋友可以参考下2023-02-02
当你跑起一个项目的时候,第一步需要先安装依赖npm install,下面这篇文章主要给大家介绍了关于vue踩坑之npm install报错问题解决的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue组件props不同数据类型传参的默认值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，这篇文章主要介绍了Vue 中 store 基本用法,需要的朋友可以参考下2023-01-01
这篇文章主要给大家介绍了关于vue3 element plus按需引入最优雅的用法,以及关于Element-plus按需引入的一些坑,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了在vant 中使用cell组件 定义图标该图片和位置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了解决v-model双向绑定失效的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论