Vue元件跨層級通訊

2022-05-03 03:36:12 字數 1042 閱讀 2943

正常元件間通訊

父->子元件 是通過屬性傳遞

子->父元件 是通過this.$emit()傳遞

this.$emit()返回的是this,如果需要一些值 可使用callback方式傳遞

provide 和 inject

這對選項需要一起使用,以允許乙個祖先元件向其所有子孫後代注入乙個依賴,

不論元件層次有多深,並在起上下游關係成立的時間裡始終生效。

provide 和 inject 繫結並不是可響應的。這是刻意為之的。

然而,如果你傳入了乙個可監聽的物件,那麼其物件的屬性還是可響應的。

provide提供資料,多層子元件 向上層尋找,只要找到 就不在向上層尋找了.

inject 向子元件注入資料

使用方式

第一種方式(傳遞物件,使用字串陣列接收)

//

父級元件提供 'foo'

var provider =,

//...}//

子元件注入 'foo'

var child =

//...

}

第二種方式(傳遞返回物件的函式, 使用物件接收)

provide() };}

inject: ) //

降級情況下使用的 value

//可以是 普通值

//可以是 對非原始值使用乙個工廠方法}}

//正常子元件

this.theme //

即可訪問

//子元件是函式式元件的使用方式

injections.theme.color

vue.observable( object )

讓乙個物件可響應。vue 內部會用它來處理 data 函式返回的物件。

可以作為最小化的跨元件狀態儲存器,用於簡單的場景

提供資料可改為

provide() );

return

;},

react元件跨層級通訊context

react 中使 context 實現祖代元件向後代元件跨層級傳值。vue中的 provide inject 於context context api react.createcontext 建立 個 context 物件。當 react 渲染 個訂閱了這個context 物件的元件,這個元件會從元...

Vue 元件通訊

單層元件通訊 prop 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件 的資料。父元件的資料需要通過 prop 才能下發到子元件中。子元件要顯式地用 props 選項宣告它預期的資料 vue.component child 然後給他傳乙個訊息 message hel...

vue元件通訊

這部分vue文件已經說的很清楚了,但是為了更好的理解,自己再整理一遍。首先,父元件的與子元件的通訊是通過子元件的props。那麼子元件有資料變化時,想要通知父元件應該怎麼辦呢?父元件可以在使用子元件的地方直接用 v on 來監聽子元件觸發的事件。簡單來說,就是子元件監聽的事件,在函式內使用 emit...