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

 這種不到萬不得已的情況盡量不要用，會對全局造成污染，出現問題也不好定位