解析vue的provide和inject使用方法及其原理

更新時間：2021年10月28日 14:44:12 作者：yezi__626

這篇文章主要介紹了vue的provide和inject使用方法及其原理,本文通過源碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

首先來談?wù)勎覀優(yōu)槭裁匆褂胮rovide/inject呢？對于爺爺和孫子組件之間，甚至太爺爺組件與孫子組件通信我們用vuex不就ok了。

那事實的確如此，但是，請聽我說但是，有時候你項目比較小甚至組件通信的場景很少的，那么你引入vuex就為了那么幾個通信傳參是不是很浪費啊。有人也可能會想到使用$parent獲取父組件實例，來獲取data/methods，這種兩層就還好，那多層呢，組件嵌套很深的話，你怎么弄？寫個函數(shù)把$parent再封裝一下。那不是很麻煩嗎，現(xiàn)成的你不用非要曲線救國。哈哈～扯遠了。

不廢話那么多了，就告訴你用provide/inject就是解決你這些問題，準沒錯。讓我們看看如何使用呢？反手就是幾行簡單的代碼：

1.父組件提供向子組件要傳遞的參數(shù)
provide() {
    return {
      listType: this.listType,
    }
  }
2.子組件使用：
inject: ['listType'],

當然，你也可以在inject中指定你的默認值和你參數(shù)的來源：

inject:{
  listType:{
  from:"par"http://provide定義的名字
  default:1
  }
}

好啦！是不是很簡單呢。其實就是不管是父組件還是祖先組件都可以向后代組件中注入依賴，無論組件的層次有多深。

再說一些：

provide可以是一個對象，也可以是一個返回對象的函數(shù)。

inejct:可以是字符串數(shù)組或者一個對象。

有興趣的話再看看下面的源碼部分，也是相當容易了解的：

provide的核心源碼：

export function provide<T>(key: InjectionKey<T> | string | number, value: T) {
  if (!currentInstance) {
    if (__DEV__) {
      warn(`provide() can only be used inside setup().`)
    
    }
  } else {
    //獲取當前組件的provides,默認實例繼承父類的provides對象
    let provides = currentInstance.provides
    //使用父provide對象作為原型來創(chuàng)建自己的provide對象
    const parentProvides =
      currentInstance.parent && currentInstance.parent.provides
    if (parentProvides === provides) {
      provides = currentInstance.provides = Object.create(parentProvides)
    }
    provides[key as string] = value
  }
}

inject的核心源碼：

export function inject(
  key: InjectionKey<any> | string,
  defaultValue?: unknown,
  treatDefaultAsFactory = false
) {
  //獲取當前組件實例
  const instance = currentInstance || currentRenderingInstance
  if (instance) {
  //獲取provides
    const provides =
      instance.parent == null
        ? instance.vnode.appContext && instance.vnode.appContext.provides
        : instance.parent.provides

    if (provides && (key as string | symbol) in provides) {
      //如果key存在就直接返回
      return provides[key as string]
    } else if (arguments.length > 1) {
      //如果key不存在，設(shè)置了默認值就直接返回默認值
      return treatDefaultAsFactory && isFunction(defaultValue)
        ? defaultValue.call(instance.proxy)
        : defaultValue
    } else if (__DEV__) {
      //如果都沒有就提示
      warn(`injection "${String(key)}" not found.`)
    }
  } else if (__DEV__) {
    warn(`inject() can only be used inside setup() or functional components.`)
  }
}

到此這篇關(guān)于解析vue的provide和inject使用方法及其原理的文章就介紹到這了,更多相關(guān)vue provide和inject使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: