首先來談談我們為什麼要使用provide/inject呢？對於爺爺和孫子元件之間，甚至太爺爺元件與孫子元件通訊我們用x不就ok了。

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

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

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

當然，你也可以在inject中指定你的預設值和你引數的來源：

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

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

再說一些：

provide可以是一個物件，也可以是一個返回物件的函式。

inejct:可以是字串陣列或者一個物件。

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

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物件作為原型來建立自己的provide物件
    const parentProvides =
      currentInstance.parent && currentInstance.parent.provides
  
 
  if (parentProvides === provides) {
      provides = currentInstance.provides = Object.create(parentProvides)
    }
    provides[key as string] = value
  }
}
​

inject的核心原始碼：

export functwww.cppcns.comion 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不存在，設定了預設值就直接返回預設值
      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.`)
  }
}
​

到此這篇關於解析vue的provide和inject使用方法及其原理的文章就介紹到這了YvVBiFpp,更多相關vue provide和inject使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！