Vue.js是一款前端框架,而Vue的組件系統是其最為顯著的特色之一。在Vue組件系統中,組件之間往往需要進行數據或方法的傳遞,而如何在組件之間優雅地傳遞這些數據或方法就是一個值得探討的話題。
Vue為我們提供了兩個API來幫助我們解決這個問題,它們分別是provide和inject。這兩個API的作用是在父組件provide一些數據或方法,然后在子孫組件inject這些數據或方法,以供在子孫組件中使用。
// 父組件 provide 數據 provide() { return { state: this.state } } // 子組件使用 inject 獲取數據 inject: ['state']
這里我們可以看到,通過在provide方法中返回一個對象,我們可以將state這個變量提供給所有子孫組件。而在子孫組件中,我們通過inject屬性將state變量引入到組件內,這樣我們就可以直接使用state變量了。
需要注意的是,inject屬性并不是響應式的,也就是說如果在父組件中修改了provide提供的數據,子組件并不會隨之更新。因此,我們需要在子組件中手動獲取provide提供的數據,然后將其轉為響應式數據,這里我們可以使用Vue.observable()方法來完成。
// 子組件將父組件提供的數據轉成響應式數據 data() { return { reactiveState: Vue.observable(this.state) } }
通過將父組件提供的數據轉為響應式數據后,子組件可以隨時獲取到最新的值,并能夠響應式地更新。
下一篇vue init卡