Vue中全局变量的定义和使用


Posted in Javascript onJune 05, 2019

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中全局变量的定义和使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 Javascript
js 数组 fill() 填充方法
Nov 02 Javascript
详解express使用vue-router的history踩坑
Jun 05 #Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 #Javascript
用webpack4开发小程序的实现方法
Jun 04 #Javascript
JS实现的对象去重功能示例
Jun 04 #Javascript
JS数组中对象去重操作示例
Jun 04 #Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 #jQuery
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 #Javascript
You might like
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
MySQL相关说明
2007/01/15 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
numpy数组广播的机制
2019/07/12 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
类和结构的区别
2012/08/15 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
群众路线剖析材料
2014/09/30 职场文书
大学生个人总结范文
2015/02/15 职场文书
工程资料员岗位职责
2015/04/13 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
摩登时代观后感
2015/06/03 职场文书
2015年教务主任工作总结
2015/07/22 职场文书