Vue.prototype 全局變量

有兩種都是在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