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


Posted in Javascript onAugust 22, 2018

1、全局变量专用模块

意思是说,用一个模块(js or vue)管理这套全局变量,模块里的变量用export (最好导出的格式为对象,方便在其他地方调用)暴露出去,当其它地方需要使用时,用import 导入该模块

全局变量专用模块Global.vue

const colorList = [
 '#F9F900',
 '#6FB7B7',
]
const colorListLength = 20
function getRandColor () {
 var tem = Math.round(Math.random() * colorListLength)
 return colorList[tem]
}
export default
{
 colorList,
 colorListLength,
 getRandColor
}

模块里的变量用出口暴露出去,当其它地方需要使用时,引入模块全球便可。

需要使用全局变量的模块html5.vue

<template>
 <ul>
  <template v-for="item in mainList">
   <div class="projectItem" :style="'box-shadow:1px 1px 10px '+ getColor()">
     <router-link :to="'project/'+item.id">
      ![](item.img)
      <span>{{item.title}}</span>
     </router-link>
   </div>
  </template>
 </ul>
</template>
<script type="text/javascript">
import global from 'components/tool/Global'
export default {
 data () {
  return {
   getColor: global.getRandColor,
   mainList: [
    {
     id: 1,
     img: require('../../assets/rankIcon.png'),
     title: '登录界面'
    },
    {
     id: 2,
     img: require('../../assets/rankIndex.png'),
     title: '主页'
    }
   ]
  }
 }
}
</script>

2、全局变量模块挂载到Vue.prototype 里

Global.js同上,在程序入口的main.js里加下面代码

import global_ from './components/tool/Global'
Vue.prototype.GLOBAL = global_

挂载之后,在需要引用全局量的模块处,不需再导入全局量模块,直接用this就可以引用了,如下:

<script type="text/javascript">
export default {
data () {

return {
 getColor: this.GLOBAL.getRandColor,
 mainList: [
  {
   id: 1,
   img: require('../../assets/rankIcon.png'),
   title: '登录界面'
  },
  {
   id: 2,
   img: require('../../assets/rankIndex.png'),
   title: '主页'
  }
 ]
}
}
}
</script>

1和2的区别在于:2不用在用到的时候必须按需导入全局模块文件

3、vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。因此可以存放着全局量。因为Vuex有点繁琐,有点杀鸡用牛刀的感觉。认为并没有必要。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 #Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 #Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 #Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 #Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 #Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 #jQuery
js动态设置select下拉菜单的默认选中项实例
Aug 21 #Javascript
You might like
mysql 字段类型说明
2007/04/27 PHP
php session 预定义数组
2009/03/16 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
php银联网页支付实现方法
2015/03/04 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
JQuery之focus函数使用介绍
2013/08/20 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
跟老齐学Python之类的细节
2014/10/13 Python
python实现录音小程序
2020/10/26 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
毕业生自我推荐
2013/11/04 职场文书
一名毕业生的自我鉴定
2013/12/04 职场文书
党组织公开承诺书
2014/03/29 职场文书
促销活动总结
2014/04/28 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏