Vue.js 3.x 中跨層級組件如何傳遞數據?
- 2022 年 5 月 5 日
- 筆記
- javascript, vue.js, Vue.js 3.x 源碼系列, 前端開發
provide/inject 基本用法
在 Vue.js
中,跨層級組件如果想要傳遞數據,我們可以直接使用 props
來將祖先組件的數據傳遞給子孫組件:
註:上圖來自
Vue.js
官網:Prop Drilling。
如上圖所示,中間組件 <Footer>
可能根本不需要這部分 props
,但為了 <DeepChiild>
能訪問這些 props
,<Footer>
還是需要定義這些 props
,並將其傳遞下去。
有人說我們可以使用 $attrs/$listeners
,但依然還要經過中間層級,而使用 Vuex
又過於麻煩,Event Bus
又很容易導致邏輯分散,出現問題後難以定位。
那麼,有沒有其他方法可以實現直接從祖先組件傳遞數據給子孫組件呢?答案就是 provide/inject
。
祖先組件:
// Root.vue
<script setup>
import { provide } from 'vue'
provide('msg' /* 注入的鍵名 */ , 'Vue.js' /* 值 */)
</script>
子孫組件:
// DeepChild.vue
<script setup>
import { inject } from 'vue'
const msg = inject('msg' /* 注入的鍵名 */, 'World' /* 默認值 */)
</script>
具體用法詳見:Provide / Inject。
現在,問題解決了:
註:上圖來自
Vue.js
官網:Prop Drilling。
provide 實現原理
這麼神奇的東西,究竟是如何實現的呢?
export function provide<T>(key: InjectionKey<T> | string | number, value: T) {
let provides = currentInstance.provides
const parentProvides = currentInstance.parent && currentInstance.parent.provides
if (parentProvides === provides) {
provides = currentInstance.provides = Object.create(parentProvides)
}
provides[key as string] = value
}
在默認情況下,組件實例的 provides 繼承自其父組件。但是當組件實例需要提供自己的值的時候,它使用父組件的 provides 對象作為原型,來創建自己的 provides 對象。這樣一來,當使用 inject
時,我們就可以通過原型鏈來找到父組件提供的數據。
inject 實現原理
inject
的代碼也很簡單,簡單到你看了之後會來一句:
export function inject(
key: InjectionKey<any> | string,
defaultValue?: unknown,
treatDefaultAsFactory = false
) {
const instance = currentInstance || currentRenderingInstance
if (instance) {
// #2400
// to support `app.use` plugins,
// fallback to appContext's `provides` if the instance is at root
const provides = instance.parent == null
? instance.vnode.appContext && instance.vnode.appContext.provides
: instance.parent.provides
if (provides && (key as string | symbol) in provides) {
return provides[key as string]
} else if (arguments.length > 1) {
return treatDefaultAsFactory && isFunction(defaultValue)
? defaultValue.call(instance.proxy)
: defaultValue
}
}
}
inject
的主要功能就兩點:
- 通過
in
操作獲取父組件的數據,in
操作會遍歷原型鏈,這就是上面provide
的實現中,為什麼組件要使用父組件的 provides 對象作為原型來創建自己 provides 對象的原因 - 實現
inject
的默認值功能,inject
第二個參數為默認值
一句話總結:provide/inject
利用原型鏈來實現跨層級組件的數據傳遞。