Vue.js 3.x 中跨層級元件如何傳遞資料?

語言: CN / TW / HK

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 利用原型鏈來實現跨層級元件的資料傳遞。