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.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
javascript中如何判断类型汇总
May 14 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 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
我常用的几个类
2006/10/09 PHP
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python创建线程示例
2014/05/06 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
python2.7实现邮件发送功能
2018/12/12 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
财务助理岗位职责
2013/11/10 职场文书
高中体育教学反思
2014/01/24 职场文书
运动会开幕式解说词
2014/02/05 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
2014年宣传工作总结
2014/11/18 职场文书
装修公司管理制度
2015/08/05 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL