前言

10多年的祿勸網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整祿勸建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“祿勸網(wǎng)站設(shè)計(jì)”,“祿勸網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

Vue中父組件到子組件的通信主要由子組件的props屬性實(shí)現(xiàn)。但是在一些情況下，父組件無法直接向子組件的props傳值。比如子組件通過父組件的slot進(jìn)入父組件，父組件根本不知道子組件是誰，更不用說用子組件的props了。這時(shí)應(yīng)該怎么辦呢？Vue在2.2.0版本引入了provide與inject，正好適合處理這一情況。

什么是provide與inject

用文檔的話說：

provide/inject需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。如果你熟悉 React，這與 React 的上下文特性很相似。

這就是說從父組件的provide屬性傳入一個(gè)對象，子組件（或者是孫組件，只要是子級組件）可以用inject屬性接收父組件的provide屬性。比如

// main.vue

 
// c1.vue

 

 
// c2.vue

 

上面的main組件會被渲染為:

 
hello world

可以看到，c1組件在不清楚子組件是什么的情況下，將它的props中的message傳給了c2組件。在這里c1組件就像是一個(gè)數(shù)據(jù)源一樣，為子組件提供數(shù)據(jù)。但是，c1組件提供的數(shù)據(jù)僅在c1的子孫組件中可見，因此可以算作是有作用域限定的數(shù)據(jù)源。

父到子孫組件方向的數(shù)據(jù)流

父到子孫組件方向是provide/inject機(jī)制設(shè)計(jì)時(shí)的數(shù)據(jù)流方向。我們可能會猜想，在父組件中更改provide的值，子組件會響應(yīng)式的發(fā)生改變。但是注意到文檔中話。

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

這意味著，如果provide的值不是可監(jiān)聽對象時(shí)，在父組件中更改provide的值，子組件不會發(fā)生任何變化。比如模板仍然為上面那個(gè)例子的模板，message的值是一個(gè)props屬性，不是可監(jiān)聽對象，如果我們在c1的mounted鉤子函數(shù)里改變message的值。如:

// c1.vue

子組件不會響應(yīng)修改后的值。

但是如果provide的值是一個(gè)可監(jiān)聽對象呢？請看一下例子：

 
// c2.vue

 

此時(shí)在c1掛載10s后，子組件將會顯示I can show in c2。為什么呢？c2中messageData實(shí)際上就是c1實(shí)例的this.$data。而this.$data上有message的響應(yīng)式getter與setter。所以c2的視圖會被message的dep收集，因此在c1中更新message，c2的視圖也會更新。

縱觀整個(gè)過程，provide/inject機(jī)制是非響應(yīng)式的，即provide與inject之間沒有綁定。具體的值是在子組件初始化過程中決定的。

總結(jié)

provide/inject提供了一種新的組件間通信的方法。它允許父組件向子孫組件間進(jìn)行跨層級的數(shù)據(jù)分發(fā)。但是provide/inject是非響應(yīng)式的，如果要子孫組件根據(jù)父組件的值進(jìn)行改變，provide/inject機(jī)制不是一個(gè)好的選擇。此時(shí)可以使用Vuex來管理狀態(tài)。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對創(chuàng)新互聯(lián)的支持。