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 相关文章推荐
jQuery多个input求和的实现方法
Feb 12 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
详解使用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
浅析php数据类型转换
2014/01/09 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php实现压缩多个CSS与JS文件的方法
2014/11/11 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Python学习之os模块及用法
2020/06/03 Python
python excel多行合并的方法
2020/12/09 Python
瑞士国际航空官网:SWISS
2016/07/21 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
专题组织生活会发言材料
2014/10/17 职场文书
员工评语范文
2014/12/31 职场文书
入学证明
2015/06/23 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书