vue傳值之 provide和inject

2021-10-22 14:14:42 字數 728 閱讀 4650

元件之間的通訊可以通過props和$emit的方式進行通訊,但是如果元件之間的關係非常複雜的話,通過以上的方式會很麻煩,並且程式會非常脆弱,沒有建中性可言。

在vue2.2.0 中新增provide和inject屬性,可以方便的幫助我們進行元件間的傳值。

使用:

父元件通過provide提供資料,其他組價可以使用inject注入資料。

父元件中:

provide()

},

子元件接收(三種寫法):

inject:

['parent'],

inject:)}

},inject:)}

},

provide應該是 乙個物件或返回乙個物件的函式。 該物件包含可注入其子孫的屬性。

inject應該是:

乙個字串陣列或乙個物件,物件的 key 一般為provide傳遞的物件的屬性名(當然也可以改名字,當使用自定義名稱的時候,需要使用 from 來表示其源屬性:),value 是乙個物件,該物件的:

from 屬性是provide傳過來的源屬性;

default :與 prop 的預設值類似,你需要對非原始值使用乙個工廠方法:default: () => {}

vue之元件傳值

父傳子 子接收props 第二種方法 this.refs.child.子元件的屬性或者方法子傳父 addsum e 父接收changesum e 第二種方法 this.parent.父元件的屬性或者方法深度傳值,用於元件多層巢狀 provide 子元件或孫元件 inject foo listener...

Vue依賴注入 provide 和 inject

允許乙個祖先元件向其所有子孫後代注入乙個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效 provide選項允許我們指定我們想要提供給後代元件的資料 方法 provide選項應該是乙個物件或返回乙個物件的函式 provide function 或者 provide 然後在任何後代元件裡...

Vue中provide和inject 用法

1.概念 成對出現 provide和inject是成對出現的 作用 用於父元件向子孫元件傳遞資料 使用方法 provide在父元件中返回要傳給下級的資料,inject在需要使用這個資料的子輩元件或者孫輩等下級元件中注入資料。使用場景 由於vue有 parent屬性可以讓子元件訪問父元件。但孫元件想要...