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”);