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

赞 (0)

相关推荐

  • 浅谈在vue项目中如何定义全局变量和全局函数

    写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处,可能有一些朋友对此不太了解,所以随便写出来分享一波.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vu

  • 详解VUE 定义全局变量的几种实现方式

    最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE的全局变量,不如说是模块化JS开发的全局变量. 1.全局变量专用模块 就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好. 全局变量专用模块 Global.vue <script type="text/javascript"> const colorList = [ '#F9F900', '#6FB7B7', '#9999CC', '#B766AD', '#B87070', '#FF8F59'

  • VUE 全局变量的几种实现方式

    1.全局变量专用模块 意思是说,用一个模块(js or vue)管理这套全局变量,模块里的变量用export (最好导出的格式为对象,方便在其他地方调用)暴露出去,当其它地方需要使用时,用import 导入该模块 全局变量专用模块Global.vue const colorList = [ '#F9F900', '#6FB7B7', ] const colorListLength = 20 function getRandColor () { var tem = Math.round(Math.

  • vue 如何添加全局函数或全局变量以及单页面的title设置总结

    传统的设置title的方法是:document.title = 'title' 但是这种写法在iOS的微信上是不兼容的 这里设置title的方法是通过在百度搜索的所谓黑科技,避免了安卓和iOS的不兼容写法 首先在index.html中定义一个全局的函数: var setTitle = function (title) { var u = navigator.userAgent var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu

  • Vue引入sass并配置全局变量的方法

    引入sass 首先使用官方提供的脚手架vue-cli进行搭建框架,这里就不做说明了,查阅官网即可. 等安装完所有依赖后,安装sass的依赖包: npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 然后在build文件夹下的webpack.base.conf.js的rules里面添加配置: { test: /\.sass$/, loaders: ['style',

  • Vue中定义全局变量与常量的各种方式详解

    前言 本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1: 创建 global.js 并且在其中定义 let a = 10; 在入口文件中引入 global.js import './global.js' 在项目中使用: a // 报错 发现报错了, a 并没有定义. 为什么? 这个涉及到模块作用域: 1 每一个 js 都相当于

  • vue定义全局变量和全局方法的方法示例

    一.全局引入文件 1.先定义共用组件 common.vue <script type="text/javascript"> // 定义一些公共的属性和方法 const httpUrl = 'http://39.105.17.99:8080/' function commonFun() { console.log("公共方法") } // 暴露出这些属性和方法 export default { httpUrl, commonFun } </scrip

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

    1.工作中遇到的两类问题 -------------------------------------------------------------------------------- 1.1 状态值(标志) A界面赋值的a变量,作为记录状态值(标志)需要被其他几个界面使用.其他几个界面亦可以改变a状态值. 1.2 传递字段 A界面有a字段,B界面没有a字段,但需要调用a字段. 2.解决方法 ---------------------------------------------------

  • Vue 中生命周期定义及流程

    Vue 中生命周期定义及流程

    目录 一.生命周期定义 二.生命周期流程 三.总结 一.生命周期定义 生命周期:又名:生命周期回调函数.生命周期函数.生命周期钩子 生命周期是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数 3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的 4.生命周期函数中的 this 指向是 vm 或组件实例对象 做一个小例子,要求页面的文字一上来透明度就周而复始的从1变到0 <div id="root"> <h2 :style="{opaci

  • vue中防抖和节流的使用方法

    目录 前言 概念 防抖 定义 使用场景 代码 在vue中使用 节流 定义 使用场景 代码 在vue中使用 总结 前言 在一个电影项目中,我想在电影的列表中,保存下拉的当前位置,防止你切换页面后,再切换回当前的电影列表页,他就又回到电影的第一条数据. 这时候,我不想每次只要滑动一点,就保存当前位置,我想隔一段时间,保存一次,这时候,就可以使用防抖和节流. 概念 说白了, 防抖节流就是使用定时器 来实现我们的目的. 防抖(debounce): 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则

  • 在vue中多次调用同一个定义全局变量的实例

    在Vue开发中,有很多场景会用到多次重复的API请求. 例如: '//192.168.1.117:1009/' 在多个地方调用,每次书写很麻烦,后期项目维护也不好管理.我们可以在src目录下创建一个api文件夹. 例如: 定义一个公共方法. config.js: export const http='//192.168.1.117:1009/' 在任何页面调用将http方法暴露出来 import {http} from "../../src/api/config" this.$http

  • vue中配置scss全局变量的步骤

    vue中配置scss全局变量的步骤

    在写项目的过程中,如果用的是scss来编写样式代码,常常需要定义各种变量,例如主题色.主字号之类的,因此我们会把这些变量写到一个单独的_variable.scss文件内,但是每次都要在vue单文件内引入这些变量未免太繁琐了,所以有没有办法可以默认把变量文件作为全局文件进行引入呢?答案是肯定的,可以用下面的方法进行配置,可以根据当前使用的框架和环境来进行方法的选择. 一.使用vue-cli(即vue-cli2)脚手架时 1. 首先,需要安装一个loader,sass-resources-loade

  • vue中接口域名配置为全局变量的实现方法

    src中新建 一个 domain.js文件 // 配置全局接口域名 const domain = 'http://bowensi.xiaoniren.cn/'; export default { testUrl:domain } main.js中 import domain from './domain.js'; global.domain = domain; 组件中: data () { return { imgsrc:domain.testUrl}} 以上这篇vue中接口域名配置为全局变量的

  • Vue 中可以定义组件模版的几种方式

    前端组件化开发已经是一个老生常谈的话题了,组件化让我们的开发效率以及维护成本带来了质的提升. 当然因为现在的系统越来越复杂庞大,所以开发与维护成本就变得必须要考虑的问题,因此滋生出了目前的三大前端框架 Vue.Angular.React. 那今天我们就来看看 Vue 中有哪些定义组件模版的方式以及他们之间的一些差别. 字符串形式 Vue 最简单直接的一种定义组件模版的方式,但是方式写起来很不友好,就像我们以前拼接 HTML 元素是一样的,很痛苦,所以我们并不常用 Vue.component("m

  • vue项目中使用bpmn-自定义platter的示例代码

    内容概述 本系列"vue项目中使用bpmn-xxxx"分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下.如果转载或通过爬虫直接爬的,格式特别丑,请来原创看:我是作者原文 前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我

  • Vue中如何定义数据示例详解

    前言 在开发的过程中,定义变量是一件非常高频且十分基础的事情,如何合理的根据变量的使用场景和作用域范围进行定义变量,是一件很小缺很容易犯错的事情 Vue2已经流行使用了这么多年,多数开发者在开发过程中喜爱在data选项中梭哈定义很多变量,这样做非常不利于代码的阅读性.维护性和性能,想要很好的使用变量,需要结合Vue和JS的特性 在Vue中,按照是否需要双向数据绑定,可以将变量分为两种: 一种是需要被Vue的数据劫持,将data的变化实时响应到view上 只要data只能够的msg变化, temp

  • vue中使用定义好的变量设置css样式详解

    vue中使用定义好的变量设置css样式详解

    目录 前言 实现 第一种情况 第二种情况 语法 方法一 方法二 总结 前言 在做项目的时候,通常会遇到需要在 HTML 标签上绑定变量来设置样式,对于这种需求,共有两种情况. 实现 第一种情况 如果是对于代码中实实在在存在的 HTML 标签,我们可以直接绑定变量来设置样式,比如改变表格的边框. 先设置一个表格边框样式的 JS 变量(table_border). 再在 HTML 标签的 style 属性上绑定该 JS 变量. <template> <div class="app-

随机推荐