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


Posted in Javascript onJune 01, 2017

最近在学习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有点繁琐,有点杀鸡用牛刀的感觉。认为并没有必要。

链接:vuex官方介绍

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

Javascript 相关文章推荐
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
JavaScript实现单例模式实例分享
Dec 22 Javascript
微信小程序实现留言功能
Oct 31 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 #Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 #Javascript
js随机生成一个验证码
Jun 01 #Javascript
JS实现简单抖动效果
Jun 01 #Javascript
深入理解vue中的$set
Jun 01 #Javascript
详解angular中的作用域及继承
May 31 #Javascript
Node学习记录之cluster模块
May 31 #Javascript
You might like
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
详解javascript高级定时器
2015/12/31 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
详解vue 模版组件的三种用法
2017/07/21 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
Python函数参数类型*、**的区别
2015/04/11 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python判断是否json是否包含一个key的方法
2018/12/31 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
医大实习自我鉴定
2013/12/07 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
商场广播稿范文
2015/08/19 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
学习心理学心得体会
2016/01/22 职场文书
Java spring定时任务详解
2021/10/05 Java/Android
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android