Vue.prototype 全局变量

有两种都是在main.js声明

第一种

main.js 声明

?

1 2 3 4 5 6 7 8 9 10

Vue.config.productionTip = false   // mount axios Vue.$http and this.$http Vue.use(VueAxios)   Vue.prototype.$a = 1   new Vue({   router, ...

在组件中使用a

?

1	console.log(this.$a)

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

 

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

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

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

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

第二种

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

?

1 2 3 4 5 6 7 8 9 10 11

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

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

第三种

把全局变量挂在Window下面，在main.js中：

?

1	window.a = 1;

 组件A

?

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

 组件B

?

1	console.log(a)//2

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

 

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

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