vue2 全局变量的设置方法


Posted in Javascript onMarch 09, 2018

最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE的全局变量,不如说是模块化JS开发的全局变量。

1、全局变量专用模块

就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好。

全局变量专用模块 Global.vue

<script type="text/javascript">
const colorList = [
 '#F9F900',
 '#6FB7B7',
 '#9999CC',
 '#B766AD',
 '#B87070',
 '#FF8F59',
 '#FFAF60',
 '#FFDC35',
 '#FFFF37',
 '#B7FF4A',
 '#28FF28',
 '#1AFD9C',
 '#00FFFF',
 '#2894FF',
 '#6A6AFF',
 '#BE77FF',
 '#FF77FF',
 '#FF79BC',
 '#FF2D2D',
 '#ADADAD'
]
const colorListLength = 20
function getRandColor () {
 var tem = Math.round(Math.random() * colorListLength)
 return colorList[tem]
}
export default
{
 colorList,
 colorListLength,
 getRandColor
}
</script>

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

需要使用全局变量的模块 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>
<style scoped type="text/css">
.projectItem
{
 margin: 5px;
 width: 200px;
 height: 120px;
 /*border:1px soild;*/
 box-shadow: 1px 1px 10px;
}
.projectItem a
{
 min-width: 200px;
}
.projectItem a span
{
 text-align: center;
 display: block;
}
</style>

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>

3、使用VUEX

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

以上这篇vue2 全局变量的设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
vue component组件使用方法详解
Jul 14 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
深入理解node.js http模块
Jan 24 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 #Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 #Javascript
JavaScript实现微信号随机切换代码
Mar 09 #Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 #Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 #Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 #Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 #Javascript
You might like
PHP分页显示制作详细讲解
2006/12/05 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
js确定对象类型方法
2012/03/30 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Python探索之SocketServer详解
2017/10/28 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
python交互界面的退出方法
2019/02/16 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
酒店营销策划方案
2014/02/07 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
产品发布会策划方案
2014/05/12 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
听证通知书
2015/04/24 职场文书
导游词之西递宏村
2019/12/10 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang