聊聊Vue中provide inject的應用詳解

2022-06-14 20:36:12 字數 2950 閱讀 1849

眾所周知,在元件式開發中,最大的痛點就在於元件之間的通訊。在 vue 中,vue 提供了各種各樣的元件通訊方式,從基礎的 props/$emit 到用於兄弟元件通訊的 eventbus,再到用於全域性資料管理的 vuex。

在這麼多的元件通訊方式中,provide/inject 顯得十分阿卡林(毫無存在感)。但是,其實 provide/inject 也有它們的用武之地。今天,我們就來聊聊 vue 中 provide/inject 的應用。

何為 provide/inject

provide/inject 是 vue 在 2.2.0 版本新增的 api,官網介紹如下:

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

官網的解釋很讓人疑惑,那我翻譯下這幾句話:

provide 可以在祖先元件中指定我們想要提供給後代元件的資料或方法,而在任何後代元件中,我們都可以使用 inject 來接收 provide 提供的資料或方法。

舉個官網的

聊聊VUE中的nextTick

在談nexttick之前,先要說明一件事,可能在我們平時使用vue時並沒有關注到,事實上,vue執行的dom更新是非同步的。舉個栗子 此時控制台列印的是數值是0 這時候如果你將 改一下 這時,控制台列印的數值為1000 這也就說明,vue的dom更新是非同步的,官網上是這樣描述的 可能你還沒有注意到...

聊聊javascript中的陣列

定義陣列 1.var 陣列名稱 元素1,元素2,var arr 定義空陣列 var arr1 100,前端 true,undefined 定義陣列同時新增不同型別的元素2.建構函式方式 var 陣列名稱 new array 元素1,元素2,var 陣列名稱 new array length leng...

聊聊React Router中的History

在學習react router時,看到有關history有如下描述 react router 是建立在 history 之上的。簡而言之,乙個 history 知道如何去監聽瀏覽器位址列的變化,並解析這個 url 轉化為 location 物件,然後 router 使用它匹配到路由,最後正確地渲染對...