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 相关文章推荐
网上抓的一个特效
May 11 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
Element Alert警告的具体使用方法
Jul 27 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
php md5下16位和32位的实现代码
2008/04/09 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
three.js 入门案例详解
2018/01/23 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
python实现将内容分行输出
2015/11/05 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
什么是测试驱动开发(TDD)
2012/02/15 面试题
总经理驾驶员岗位职责
2013/12/04 职场文书
房产销售经理职责
2013/12/20 职场文书
元旦活动感言
2014/03/08 职场文书
实习生工作证明范本
2014/09/14 职场文书
社保转移委托书范本
2014/10/08 职场文书
毕业实习单位意见
2015/06/04 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers