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

Asheng發表於2022-05-05
Vue.js元件

provide/inject 基本用法

在 Vue.js 中，跨層級元件如果想要傳遞資料，我們可以直接使用 props 來將祖先元件的資料傳遞給子孫元件：

prop-drilling.png

注：上圖來自 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。

現在，問題解決了：

prop-drilling2.png

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

相關文章