首页 > 其他 > 详细

vue设置全局变量和修改

时间:2019-08-17 15:50:01      阅读:395      评论:0      收藏:0      [点我收藏+]

 

1. 只读的全局变量

对于只读的全局变量,知道的有以下两种使用方式:

1)global.js 模块中定义;其他模块import后再使用即可

1.1)定义

import Vue from ‘vue‘;

let MyComm = new Vue({
    methods: {
        deleteCookie: function (cname) {
            let d = new Date();
            let expires = "expires=" + d.toGMTString();
            document.cookie = cname + "=; " + expires;
        }
})

export default MyComm;

1.2)引用

import MyComm from "./components/common/comm";
MyComm.deleteCookie(‘ms_username‘)

 

 

2)gobal.js 模块中定义,并绑定到 prototype,其他任何Vue实例可直接引用 this.$xxxx

2.1)定义,绑定&引用

import Vue from ‘vue‘;

let MyComm = new Vue({
    methods: {
        deleteCookie: function (cname) {
            let d = new Date();
            let expires = "expires=" + d.toGMTString();
            document.cookie = cname + "=; " + expires;
        }
})

export default MyComm;
Vue.prototype.$MyComm = MyComm;
//项目中任何地方都可如此引用 
this.$MyComm.deleteCookie(‘ms_username‘)

 

2.可读写的全局变量 

如果想随时修改全局变量的值,有一种办法:main.js中data定义,其他地方通过 this.$root.{paramName} 来引用/修改

2.1)main.js 中定义

new Vue({
    router,
    data: function(){
        return {
            URL: ‘http://localhost:8080‘,
        }
    },
    render: h => h(App)
}).$mount(‘#app‘);

 技术分享图片

 

2.2)引用

// 修改
this.$root.URL= "xxxxx" 

// 引用
let URL = this.$root.URL

技术分享图片

 

vue设置全局变量和修改

原文:https://www.cnblogs.com/weibanggang/p/11368615.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!