vue2的全局变量的设置
来源:互联网 发布:java字符串转换整形 编辑:程序博客网 时间:2024/06/18 16:46
最近在学习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 = 20function 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官方介绍
阅读全文
0 0
- vue2的全局变量的设置
- Android全局变量的设置
- jsp全局变量的设置
- MR全局变量的设置
- vue2 设置网页title的问题
- Django 设置template的全局变量
- 全局变量的设置及注意事项
- Django 设置template的全局变量
- WINCE在BSP设置全局变量的方法
- angularjs 设置全局变量的3种方法
- 系统全局变量的设置System.setProperty() .
- mapreduce框架中的全局变量的设置
- Application类 的使用 ,设置全局变量
- JAVA中设置全局变量的方法
- angularjs 设置全局变量的7种方法
- angularjs 设置全局变量的3种方法
- angularjs 设置全局变量的7种方法
- angularjs 设置全局变量的7种方法
- ubuntu16.04+cuda8.0+cudnn5.1+caffe 安装(基于独立主机&集成显卡>X1080Ti)
- angular中ng-mouseenter、ng-mouseleave的时间差导致dom闪屏问题(timeout可缓解)
- ViewStub用法
- SSM(十一) 基于dubbo的分布式架构
- java中Calendar.DAY_OF_WEEK需要减一的原因
- vue2的全局变量的设置
- UidGenerator:百度出品的基于 Snowflake 算法的唯一 ID 生成器
- 如何复制shape,以及如何将shape调整到其他层
- 嵌入式系统开发入门一:必备基础知识
- delphi application的对话框为什么跑到主窗口后面 ?
- 函数调用(一)
- Selenium Webdriver 学习总结-Jenkins配置(八)
- 升级angular4 环境小坑
- bzoj 1709: [Usaco2007 Oct]Super Paintball超级弹珠