Vue的provide/inject如何用

這篇文章主要講解了“Vue的provide/inject如何用”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue的provide/inject如何用”吧！

簡單的可以把provide/inject對比為React的context，都是為了解決跨層級傳遞屬性的不方便而設(shè)立的，跟早期的context一樣，一開始provide/inject機制也沒有載入官方文檔，現(xiàn)在雖然已經(jīng)寫了，但仍是語焉不詳，這就是我寫本文的目的。

Hello World

看一個最簡單的例子，從祖輩組件中拿到傳入下來的顏色值

UI界面如上，很簡單，祖輩組件還提供了一個單選來改變。

<template>

  <div>

    <label for="red">

      紅色

      <input type="radio" id="red" value="red" v-model="color" />

    </label>

    <br />

    <label for="greed">

      綠色

      <input type="radio" id="green" value="green" v-model="color" />

    </label>

    <slot />

  </div>

</template>

先看provide，它可以是一個對象，比如

provide: {

  color: "green"

}

在孫子組件中可以順利的取到這個值，但要注意的是這樣子的寫法是不能返回Vue實例的響應(yīng)式數(shù)據(jù)的，當嘗試改為

provide: {

  color: this.color, //訪問不到Vue實例

}

發(fā)生錯誤，提示是Uncaught TypeError: Cannot read property 'color' of undefined 。

一般還是用函數(shù)的方式，返回一個傳入的對象

provide（） {

  return {

    color: this.color,

  };

}

但是color不是響應(yīng)式的，就是說如果我在祖輩組件里選擇另外一個顏色，在孫子組件里是拿不到更新后的值的，關(guān)于非響應(yīng)式這一點在下一節(jié)詳細展開。

inject用來指定一個數(shù)組或者一個對象，數(shù)組的話就放provide里字段的名稱，而對象的話可以指定

當前實例中的字段名

對應(yīng)provide里的字段名

默認值或者返回默認值的函數(shù)

const Child = {

  inject: {

    foo: {

      from: 'bar',

      default: （） => [1, 2, 3]

    }

  }

}

不是響應(yīng)式

這個跟React的context是不同的，React沒有響應(yīng)式機制，一旦改變屬性后默認會引發(fā)層層的渲染，開發(fā)者自己通過shouldComponentUpdate來優(yōu)化。

官方文檔上明確的說了

provide和inject綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個可監(jiān)聽的對象，那么其對象的 property 還是可響應(yīng)的。

第一種解決方案是把值轉(zhuǎn)為函數(shù)，記得要用箭頭函數(shù)，不然不能正確獲取this

provide（） {

  return {

    color: （） => {

      return this.color;

    },

  };

}

然后使用時就要變成了函數(shù)的調(diào)用

<template>

  <div :style="{'color':color（）}">傳下來的顏色{{color（）}}</div>

</template>

這樣子就帶來一個很明顯的缺點就是由于不是響應(yīng)式，這個函數(shù)將會被調(diào)用多次，比如上面模板里有兩個color（），可以在函數(shù)里打個斷點，會發(fā)現(xiàn)進來兩次。

更好一些的解決方案是把provide所在的Vue實例給傳遞下去，再來改造一下

provide（） {

  return {

    color: this,

  };

}

在孫組件里獲得的其實是實例了，所以要多取一層屬性

<template>

  <div :style="{'color':color.color}">傳下來的顏色{{color.color}}</div>

</template>

可以看到很多UI組件庫就是通過這個方式來傳遞屬性的，因為有可能在不確定層級的子組件里要獲得祖組件里的值。

感謝各位的閱讀，以上就是“Vue的provide/inject如何用”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對Vue的provide/inject如何用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！