正常元件間通訊
父->子元件 是通過屬性傳遞
子->父元件 是通過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...