在Vue中,我們可以通過在組件中定義data來存儲組件內部需要用到的數據。但是有時候我們希望在組件之間共享數據,或者是在組件外部也能夠訪問到數據,那么我們就可以將數據定義在Vue實例中,使其成為全局數據。
var app = new Vue({ data: { globalData: 'Hello Vue' } })
在上面的代碼中,我們創建了一個Vue實例,并在其data中定義了一個全局變量globalData。這樣,我們就可以在任何組件中都能夠通過this.$root.globalData來訪問到這個全局變量了。
Vue.component('child-component', { template: '{{ $root.globalData }}' })
在子組件中,我們可以使用$root來訪問Vue實例,并通過$root來獲取到在Vue實例中定義的全局變量。這樣,我們就可以方便地在組件之間共享數據了。
同時,在Vue實例中定義全局數據還可以方便地在組件外部訪問到數據,比如在一個腳本中:
console.log(app.globalData)
這樣,我們就可以在控制臺中打印出全局變量globalData的值了。
除了通過$root訪問全局數據外,Vue還提供了一個mixin的機制,可以將全局數據注入到每個組件中。這樣,我們就不需要在每個組件中都手動訪問$root來獲取全局數據了。下面是一個例子:
var globalMixin = { created: function () { console.log('Global Mixin created.') }, data: function () { return { globalData: this.$root.globalData } } } Vue.mixin(globalMixin) Vue.component('child-component', { template: '{{ globalData }}' })
在上面的代碼中,我們定義了一個mixin,稱為globalMixin,這個mixin的作用是將$root中的全局數據注入到每個組件中。我們通過Vue.mixin方法將globalMixin注入到全局中。
在子組件中,我們可以通過this.globalData來訪問到全局數據了,而不需要使用$root來訪問了。
總之,在Vue中實現全局數據非常簡單,我們只需要將數據定義在Vue實例中或者通過mixin注入到每個組件中即可。這樣,我們就可以在任何組件中訪問到這些數據了。
上一篇vue event參數
下一篇python 注釋出錯