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简单实现标签云效果实例
Aug 06 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
详解Vue 单文件组件的三种写法
Feb 19 Javascript
详解Vue3中对VDOM的改进
Apr 23 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如何解决网站大流量与高并发的问题
2011/06/25 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
javascript通过class来获取元素实现代码
2013/02/20 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
vue中监听返回键问题
2019/08/28 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
pywinauto自动化操作记事本
2019/08/26 Python
python生成器用法实例详解
2019/11/22 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
一份创业计划书范文
2014/02/08 职场文书
工会工作先进事迹
2014/08/18 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
邀请函的格式
2015/01/30 职场文书
2015年工商所工作总结
2015/05/21 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL