快捷導(dǎo)航

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

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

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

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

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

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

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

當(dāng)然，你也可以在inject中指定你的默認(rèn)值和你參數(shù)的來(lái)源：

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

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

再說(shuō)一些：

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

inejct:可以是字符串?dāng)?shù)組或者一個(gè)對(duì)象。

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

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 {
    //獲取當(dāng)前組件的provides,默認(rèn)實(shí)例繼承父類的provides對(duì)象
    let provides = currentInstance.provides
    //使用父provide對(duì)象作為原型來(lái)創(chuàng)建自己的provide對(duì)象
    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
) {
  //獲取當(dāng)前組件實(shí)例
  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è)置了默認(rèn)值就直接返回默認(rèn)值
      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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: