vue2 全局变量的设置方法
最近在学习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 全局变量的设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue+Element UI+Lumen实现通用表格分页功能
这篇文章主要介绍了Vue+Element UI+Lumen实现通用表格分页功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-02-02vue3+vite3+typescript实现验证码功能及表单验证效果
这篇文章主要介绍了vue3+vite3+typescript实现验证码功能及表单验证效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04vue3中通过遍历传入组件名称动态创建多个component 组件
这篇文章主要介绍了vue3中通过遍历传入组件名称动态创建多个component 组件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03vue项目中将element-ui table表格写成组件的实现代码
这篇文章主要介绍了vue项目中将element-ui table表格写成组件的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
最新评论