Vue中provide和inject 用法

2021-10-25 15:14:15 字數 709 閱讀 7798

1.概念

成對出現:provide和inject是成對出現的

作用:用於父元件向子孫元件傳遞資料

使用方法:provide在父元件中返回要傳給下級的資料,inject在需要使用這個資料的子輩元件或者孫輩等下級元件中注入資料。

使用場景:由於vue有$parent屬性可以讓子元件訪問父元件。但孫元件想要訪問祖先元件就比較困難。通過provide/inject可以輕鬆實現跨級訪問父元件的資料

2.簡單來說

provider/inject:簡單的來說就是在父元件中通過provider來提供變數,然後在子元件中通過inject來注入變數

需要注意的是這裡不論子元件有多深,只要呼叫了inject那麼就可以注入provider中的資料。而不是侷限於只能從當前父元件的prop屬性來獲取資料。

父元件定義:

export

default}}

;<

/script>

子孫元件接受方式:

export

default}}

<

/script>

不論子元件有多深

Vue中的provide和inject 依賴注入

一 名詞解析 provide object object inject array provide 提供依賴 是乙個物件,或者是乙個返回物件的函式。裡面呢就包含要給子孫後代的東西,也就是屬性和屬性值。inject 注入依賴乙個字串陣列,或者是乙個物件。屬性值可以是乙個物件,包含from和defaul...

Vue依賴注入 provide 和 inject

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

vue的provide和inject特性

元件之間的通訊可以通過props和 emit的方式進行通訊,但是如果元件之間的關係非常複雜的話,通過以上的方式會很麻煩,並且程式會非常脆弱,沒有建中性可言。在vue2.2.0 中新增provide和inject屬性,可以方便的幫助我們進行元件間的傳值。使用的方式很簡單 父元件通過provide提供資...