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 如何添加全局函数或全局变量以及单页面的title设置总结
  • 浅谈在vue项目中如何定义全局变量和全局函数
  • Vue中定义全局变量与常量的各种方式详解
赞 (0)

相关推荐

  • vue 如何添加全局函数或全局变量以及单页面的title设置总结

    传统的设置title的方法是:document.title = 'title' 但是这种写法在iOS的微信上是不兼容的 这里设置title的方法是通过在百度搜索的所谓黑科技,避免了安卓和iOS的不兼容写法 首先在index.html中定义一个全局的函数: var setTitle = function (title) { var u = navigator.userAgent var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linu

  • Vue中定义全局变量与常量的各种方式详解

    前言 本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入. 尝试1: 创建 global.js 并且在其中定义 let a = 10; 在入口文件中引入 global.js import './global.js' 在项目中使用: a // 报错 发现报错了, a 并没有定义. 为什么? 这个涉及到模块作用域: 1 每一个 js 都相当于

  • 浅谈在vue项目中如何定义全局变量和全局函数

    写在前面: 如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处,可能有一些朋友对此不太了解,所以随便写出来分享一波.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vu

  • vue2 全局变量的设置方法

    最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE的全局变量,不如说是模块化JS开发的全局变量. 1.全局变量专用模块 就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好. 全局变量专用模块 Global.vue <script type="text/javascript"> const colorList = [ '#F9F900', '#6FB7B7', '#9999CC', '#B766AD', '#B87070', '#FF8F59',

  • vue2+el-menu实现路由跳转及当前项的设置方法实例

    Vue.js 是什么 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 好了,下面通过本文给大家介绍vue2+el-menu实现路由跳转及当前项的设置方法,具体内容如下所示: <span style="

  • vue2.0 下拉框默认标题设置方法

    昨天到今天,用vue2.0在写一个性别选择框,一给option添加seledted属性就报错这里 下面是报错的代码 ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-c231dfa2!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/second.vue template syntax error <select v-model=&qu

  • 用Vue Demi同时支持Vue2和Vue3的方法

    目录 Vue Demi是什么 基本原理 v2版本 v2.7版本 v3版本 Vue Demi是什么 如果你想开发一个同时支持Vue2和Vue3的库可能想到以下两种方式: 1.创建两个分支,分别支持Vue2和Vue3 2.只使用Vue2和Vue3都支持的API 这两种方式都有缺点,第一种很麻烦,第二种无法使用Vue3新增的组合式 API,其实现在Vue2.7+版本已经内置支持组合式API,Vue2.6及之前的版本也可以使用@vue/composition-api插件来支持,所以完全可以只写一套代码同

  • access中显示MSysObjects系统表的设置方法

    access中显示MSysObjects系统表的设置方法

    默认access的系统表MSysObjects等是不显示的,需要手动设置access显示MSysObjects等系统表. 设置方法如下: 1. 打开Access 2. 点击"工具"菜单,选择"选项" 3. 在"视图"页上,将"系统对象"勾上 4. 点击"确定"按钮保存设置 5. 点击"工具"菜单,选择"安全"中的"用户与组权限" 6. 选择&quo

  • AngularJS表格样式简单设置方法示例

    AngularJS表格样式简单设置方法示例

    本文实例讲述了AngularJS表格样式简单设置方法.分享给大家供大家参考,具体如下: 1.问题背景 AngularJS表格table,利用样式设置表格间隔色 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格设置样式</title> <link rel="stylesheet" h

  • angular select 默认值设置方法

    如下所示: <select ng-model="selected" ng-options="x.id as x.name for x in users"></select> $scope.users = [ {name:'a',id:'1'}, {name:'b',id:'2'}, {name:'c',id:'3'} ]; $scope.selected='2';//id的值,区分类型 $scope.selected=$scope.users

  • URL Rewrite的设置方法

    URL Rewrite需要服务器的支持!在启用此设置之前,请确保服务器上已作出了正确的设置,设置方法请参看下边的"Apache下的设置方法"和"IIS下的设置方法"!Apache下的设置方法 复制代码 代码如下: 打开 Apache 的配置文件 httpd.conf .  将#LoadModule rewrite_module modules/mod_rewrite前面的#去掉  在 httpd.conf中添加: <IfModule mod_rewrite.c

  • 新网互联 域名 泛解析设置方法

    1.什么是泛域名解析? 泛域名解析是指将*.域名解析到同一IP. 在域名前添加任何子域名,均可访问到所指向的WEB地址.也就是客户的域名a.com之下所设的*.a.com全部解析到同一个IP地址上去. 比如客户设b.a.com就会自已自动解析到与a.com同一个IP地址上去. 2.泛域名解析域名域名解析的区别? 泛域名解析是:*.域名解析到同一IP. 域名解析是:子域名.域名解析到同一IP. 注意:只有你的空间是独立IP的时候泛域名才有意义.而域名解析则没有此要求. 3.怎样设置域名泛解析? 你

  • Log4j 日志文件Linux/Mac/Windows通用存放位置设置方法

    log4j1/log4j2中category的配置以及log的输出位置(windows和linux通用的log输出位置) 一.场景和需求 假设我现在有3个独立的用project(暂时用maven关联起来,当然也可以不用maven),一个是提供公共服务的infrastructure,一个是提供存储的persister,一个是提供搜索的searcher,其中提供基础服务的所有的类,例如DateUtils,HttpUtils等工具类都位于目录com.chuanliu.platform.activity

随机推荐