【Vue】全局变量的定义及使用

首先声明Vue使用全局变量的方法有很多，以下只是个人觉得比较简洁的2种。其中两者的第一步操作相同，即：

创建全局变量文件Global.vue，内容如下：

<script>const name = 'ZhangSan'; //名称const address = 'No.20, Taihu Road'; //地址export default {name,address}
</script>

方法1：在main.js中直接将全局变量挂载到Vue.prototype

import global from '../components/xx/Global'
Vue.prototype.GLOBAL = global;

用时不用任何多余操作，直接调用this.GLOBAL.name即可。

方法2：在需要使用全局变量的页面引入global再使用

import global from '../components/xx/Global'

data() {return {userName: global.name,userAddress: global.address}
}

二

第一步：单独新建一个全局变量模块文件，模块中定义一些变量初始状态，用export default 暴露出去。

// 判断是否显示logo
const logo = true;
export default {logo
};

第二步：在main.js中引入，并通过Vue.prototype挂载到vue实例上面。供其他模块文件使用；

// 全局环境变量
import showLogo from '../public/showLogo.js'
Vue.prototype.$showLogo = showLogo;

第三步：在需要的模块文件中引入并使用；

页面使用

【Vue】全局变量的定义及使用相关推荐

vue全局变量的定义与任意调用
vue全局变量的定义与任意调用首先: 在main.js文件中定义全局变量的代码,举例示下: 参考文章:https://www.cnblogs.com/weibanggang/p/11368615. ...
vue全局变量和局部变量,给vue定义全局的方法
vue2.0 全局变量怎么设置? vue2.0设置全局变量的源码如下:VUE介绍:DisplayOptions显示选项:包括线框显示选项框,填充框,线框,平面阴影和平滑阴影.每个对象及显示窗口均可以对 ...
vue （可读写）全局变量的定义、任意调用、值的修改
vue (可读写)全局变量的定义.任意调用.值的修改定义截图: 简单了解: 官方文档:处理边界情况 (在每个 new Vue 实例的子组件中,其根实例可以通过 $root property 进行访 ...
js定义全局变量 vue页面_使用vue.js怎么定义全局变量？
使用vue.js怎么定义全局变量?下面本篇文章给大家介绍一下在 Vuejs 项目中如何定义全局变量.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 一.在需要的地方引用进全局变量模块 ...
vue 变量定义对象_详解Vue 全局变量，局部变量
局组件和局部组件 1.先定义组件 Vue.component('组件名', { 组件模板对象 }) 注意: 组件名不要使用原生的标签名, 若组件名定义时用的是驼峰命名法, 则调用时用中划线分割后小 ...
vue全局变量的配置
一.vue 全局变量(vue 全局变量又是需要单独设置请求路径的前缀,但又要根据当前环境是开发环境还是生产环境动态匹配,那么就用这种方法) .env 在所有的环境中被载入 .env.local 在所有 ...
Vue全局变量和方法的使用
1.创建文件来存放Vue的全局变量和全局方法-common.vue <script> const userName = 'pshdhx' function add(x,y) ...
c51语言定义全局变量,全局变量的定义和使用
在用VB开发软件时,经常需要在不同的窗体间共享数据,但在过多的使用全局变量时不便于软件的调试和修改.通常有两种解决方法. 第一种方法:定义全局变量,然后在各个窗体中直接使用,例如 Public str ...
vscode生成vue模板快捷键_VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法...
1. 安装一个插件,识别vue文件 2.新建代码片段文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 3.粘贴入自己写的.vue模板 { " ...
微信小程序全局变量的定义、使用、修改
1.全局变量的定义找到根目录下的app.js 在app.js内定义全局变量 //app.js App({//定义全局变量globalData:{name:"狂徒张三",tel:& ...

【Vue】全局变量的定义及使用

创建全局变量文件Global.vue，内容如下：

二

第一步：单独新建一个全局变量模块文件，模块中定义一些变量初始状态，用export default 暴露出去。

第二步：在main.js中引入，并通过Vue.prototype挂载到vue实例上面。供其他模块文件使用；

第三步：在需要的模块文件中引入并使用；

页面使用

【Vue】全局变量的定义及使用相关推荐

最新文章

热门文章