vue元件通訊之provide inject

2022-03-25 13:28:52 字數 613 閱讀 9874

什麼是 provide / inject [傳送門]

vue的元件通訊方式我們熟知的有 props $emit bus vuex ,另外就是 provide/inject

provide/inject  是 vue.js 2.2.0 版本後新增的 api,在文件中這樣介紹 :

這對選項需要一起使用,以允許乙個祖先元件向其所有子孫後代注入乙個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效。如果你熟悉 react,這與 react 的上下文特性很相似。

provide選項應該是乙個物件或返回乙個物件的函式。該物件包含可注入其子孫的屬性。在該物件中你可以使用 es2015 symbols 作為 key,但是只在原生支援symbolreflect.ownkeys的環境下可工作。

inject選項應該是:

使用的例子:

//

父級元件提供 'foo'

var provider =,}//

子元件注入 'foo'

var child =

}

vue之元件通訊

vue元件通訊一般分為以下幾種情況 1 父子元件通訊 2 兄弟元件通訊 3 跨多層級元件通訊 一 父子通訊 父元件通過props傳遞資料給子元件,子元件通過emit傳送事件傳遞資料給父元件。父元件和子元件通訊 父元件如下 template div class parent div id child ...

Vue 元件通訊之EvemtBus

定義乙個排程器,其實就是new乙個vue。讓這個排程器承載事件,也就是使用上面的兩個方法。emit 觸發事件 on 監聽事件 第一步,專案目錄新建乙個bus.jsimport vue from vue const bus newvue export default bus 第二步,main.js裡往...

VUE之元件間通訊

1.1 父元件向子元件傳值 父元件中 父元件 cityid cityid children template export default script 子元件 子元件 div template export default script 1.2 子元件向父元件傳值 父元件 父元件 cityid c...