VUE 全局变量申明和取值

一个模块(js or vue)管理这套全局变量,模块里的变量用export  暴露出去,当其它地方需要使用时,用import 导入该模块

自己起一个名字 例如Global.vue

里面写上需要全局使用的变量

const  color= "red"//全局的颜色,统一用这个。。。

export default { color } 抛出去

比如我要在某个界面使用 这个颜色  html1.vue

<script type="text/javascript">

import global from 'components/tool/Global'//就是你的路径,js vue都一样引入

export default {

    data () {

         return {

             getColor: global.color ,//这样就取到前面设定的颜色了

                   }

}

如果你不想每次都引入,

全局变量模块挂载到Vue.prototype 里

程序入口的main.js里加下面代码

import global_ from './components/tool/Global'

Vue.prototype.GLOBAL = global_

别的界面使用就是getColor: this.GLOBAL.color ,

上面是申明和使用, 修改 的话

 Global.vue 里面加入

setColor(colors){

this.color=colors;

}

export default { color,setColor } 抛出去

别的界面修改

this.GLOBAL.setColor (“yellow”);

原文地址:https://www.cnblogs.com/XiaoHongMao1/p/14278436.html