首页 > 其他 > 详细

Vue.prototype 全局变量

时间:2019-07-15 12:48:47      阅读:92      评论:0      收藏:0      [点我收藏+]

有两种都是在main.js声明

第一种

main.js 声明

Vue.config.productionTip = false

// mount axios Vue.$http and this.$http
Vue.use(VueAxios)

Vue.prototype.$a = 1

new Vue({
  router,
...

在组件中使用a

console.log(this.$a)

 这样定义有一个问题,很容易和组件定义的值冲突,所有一般我习惯在值前面加$

 

这个值不是全局变量,而是原型,不支持修改

Vue.prototype不是全局变量,而是原型属性,去看看prototype和原型链的知识就明白了。

参考《JavaScript高级程序设计》第6章 面向对象的程序设计

因为每一次跳转到新的Vue页面,都是一个独立的Vue实例,实例中this.$aVue.prototype.$a而来,所以仍然是1


第二种

 有一种是在new Vue的时候声明,支持修改

new Vue({
    ...
    data() {
        return {
            ...,
            a: 1
            ...
        };
    },
    ...
});

其他所有组件中通过$root.a可访问和修改此变量。


第三种

把全局变量挂在Window下面,在main.js中:

window.a = 1;

 组件A

console.log(a)//1
a = 2;

 组件B

console.log(a)//2

 这种不到万不得已的情况尽量不要用,会对全局造成污染,出现问题也不好定位

 

参考:https://segmentfault.com/q/1010000009992656

 https://blog.csdn.net/pma934/article/details/86765722

Vue.prototype 全局变量

原文:https://www.cnblogs.com/cxscode/p/11188143.html

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