Vue.prototype 全局变量

最新推荐文章于 2022-08-12 11:34:27 发布

cxscode

最新推荐文章于 2022-08-12 11:34:27 发布

阅读量217

点赞数

文章标签： vue javascript js java prototype

本文链接：https://blog.csdn.net/cxs812760493/article/details/118098575

版权

有两种都是在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.$a从Vue.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

关注