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

成都創(chuàng)新互聯(lián)公司專注于新華企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城網(wǎng)站制作。新華網(wǎng)站建設(shè)公司,為新華等地區(qū)提供建站服務(wù)。全流程定制開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

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

Hello World

看一個(gè)最簡(jiǎn)單的例子，從祖輩組件中拿到傳入下來的顏色值

UI界面如上，很簡(jiǎn)單，祖輩組件還提供了一個(gè)單選來改變。

<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，它可以是一個(gè)對(duì)象，比如

provide: {

  color: "green"

}

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

provide: {

  color: this.color, //訪問不到Vue實(shí)例

}

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

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

provide（） {

  return {

    color: this.color,

  };

}

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

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

當(dāng)前實(shí)例中的字段名

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

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

const Child = {

  inject: {

    foo: {

      from: 'bar',

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

    }

  }

}

不是響應(yīng)式

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

官方文檔上明確的說了

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

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

provide（） {

  return {

    color: （） => {

      return this.color;

    },

  };

}

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

<template>

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

</template>

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

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

provide（） {

  return {

    color: this,

  };

}

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

<template>

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

</template>

可以看到很多UI組件庫(kù)就是通過這個(gè)方式來傳遞屬性的，因?yàn)橛锌赡茉诓淮_定層級(jí)的子組件里要獲得祖組件里的值。

感謝各位的閱讀，以上就是“Vue的provide/inject如何用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Vue的provide/inject如何用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

網(wǎng)站標(biāo)題：Vue的provide/inject如何用
文章出自：http://www.chinadenli.net/article8/iiegip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、服務(wù)器托管、用戶體驗(yàn)、標(biāo)簽優(yōu)化、Google、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)