聊聊 Vue 中 provide/inject 的應用

来源:https://www.cnblogs.com/karthuslorin/archive/2019/11/08/11802622.html

眾所周知,在組件式開發中,最大的痛點就在於組件之間的通信。在 Vue 中,Vue 提供了各種各樣的組件通信方式,從基礎的 props/$emit 到用於兄弟組件通信的 EventBus,再到用於全局數據管理的 Vuex。 在這麼多的組件通信方式中,provide/inject 顯得十分阿卡林(毫無存 ...


眾所周知,在組件式開發中,最大的痛點就在於組件之間的通信。在 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 提供的數據或方法。

舉個官網的

您的分享是我們最大的動力!

更多相關文章
  • var myDate = new Date();Date.now(); // 獲取當前時間 1573200670754 時間戳精確到毫秒 myDate.getYear(); //獲取當前年份(2位) myDate.getFullYear(); //獲取完整的年份(4位,2017) myDate.ge ...
  • 本節說一下DOM操作模塊里的刪除元素模塊,該模塊用於刪除DOM里的某個節點,也可以理解為將該節點從DOM樹中卸載掉,如果該節點有綁定事件,我們可以選擇保留或刪除這些事件,刪除元素的介面有如下三個: empty() ;移除匹配元素的所有子元素。 ;先移除所有後代元素關聯的數據和事件,以避免記憶體泄漏。然 ...
  • CSS的引入 在早期,如果要去定義一個H1的標題的顏色、字體、大小和其他的顯示特征,就需要用到HTML中的font或其他樣式的指令,H1只是一個結構指令所以光有它是不夠的。因此如果有多個標簽要去進行處理,就會造成樣式的重覆,後期維護的困難。 那CSS的出現就解決了這一類的問題,CSS(Cascadi ...
  • 如何插入樣式表? 代碼應該寫到什麼地方呢? 代碼分為三種插入方式,接下來筆者給園友們介紹有哪些插入方式: 嵌入式、外鏈式、行內式。 嵌入式 什麼是嵌入式? 嵌入式就是將寫好的 代碼嵌入到 文件中,嵌入式是通過 中的 標簽將 代碼嵌入到 網頁當中的。 語法規則如下: 如果我們使用的是 的文檔, 標簽中 ...
  • 彈性盒子flex: 對於客戶端的佈局非常有用,不管是平均分配space-around這個屬性還是兩端對齊space-betwee在頁面佈局的時候都會有很好的表現。 對於部分內容區域中,具有很多大致內容相同的幾個區塊的佈局都可以使用到它,將父級設置為display:flex;父級就會變成容器,子級就會 ...
一周排行
  • 1. 運行效果 在 "使用GetAlphaMask和ContainerVisual製作長陰影(Long Shadow)" 這篇文章里我介紹了一個包含長陰影的番茄鐘,這個番茄鐘在狀態切換時用到了翻轉動畫,效果如上所示,還用到了彈簧動畫,可以看到翻轉後有點回彈。本來打算自己這個動畫效果寫的,但火火已經寫 ...
  • 接上一篇,es部署很簡單,很快就弄好了。 但是還是有很多不玩美。 比如說:主機是本地的IP或機器名,埠是固定的9200. 而且是只有一個節點,我要在一臺機器上部署多個節點呢。 經過一段時間的摸索,做起來也很簡單,但過程切實很痛苦。 具體做法是:你想部署多少個節點,你就重覆多少次上一步的做法。啟動就 ...
  • 在項目中,需要為所有的Button、TextBox設置一個預設的全局樣式,一個個的為多個控制項設置相同的樣式顯然是不明智的。在WPF中可以通過資源設置全局樣式,主要有倆種方法: 1.第一種就是先寫好按鈕的樣式,不寫Key,然後在App.xaml中引用。 <ResourceDictionary xmln ...
  • 說明:該篇隨筆的代碼內容並非出自本人,是在其他網站搜尋的,出處已經不記得了,本次隨筆只為記錄,目的幫助自己,幫助他人。 實現的原理也不做多的贅述,直接上代碼。 第一個類是需要用到的Windows API public class Win32Api { [StructLayout(LayoutKind ...
  • 前言 在ASP.Net Core2.X調用的CreateWebHostBuilder和3.X的主要區別在於WebHost的調用,CreateDefaultBuilder被Host替換,另一個區別是對ConfigureWebHostDefaults()的調用; 由於新的主機生成器是通用主機生成器,因此 ...
  • 對於開發人員來說,常常需要在不藉助任何Microsoft Office及其他第三方軟體的情況下,打開、創建、修改、轉換、列印、瀏覽(Word、Excel、PowerPoint和PDF等)文檔,以及將數據從數據源轉換為常用的文檔格式,甚至一些其他的文檔操作。 在這裡,小編調查了業內許多開發人員,為大家 ...
  • 這次的目標是實現通過標註Attribute實現緩存的功能,精簡代碼,減少緩存的代碼侵入業務代碼。 緩存內容即為Service查詢彙總的內容,不做其他高大上的功能,提升短時間多次查詢的響應速度,適當減輕資料庫壓力。 在做之前,也去看了EasyCaching的源碼,這次的想法也是源於這裡,AOP的方式讓 ...
  • 例如想獲取尾碼名為.txt的文件 第一種方法獲取到的是對應的文件路徑 第二種方法可以獲取到文件的一些詳細信息 類似於"*.txt" 要與路徑中的文件名匹配的搜索字元串。這個參數可以包含有效的文本路徑和通配符(*和?)的組合人物,但它不支持正則表達式。 我是參照此路徑編寫的博客,用於自己查詢快速 ht ...
  • 我們在開發中Json傳輸數據日益普遍,有很多關於Json字元串的序列化和反序列化的文章大多都告訴你怎麼用,但是卻不會告訴你用什麼更高效。因為有太多選擇,人們往往會陷入選擇難題。 相比.NET Framework有三種選擇而.net core下已經沒有JavaScriptSerializer,但是大家 ...
  • c#微信公眾號開發 基本設置 參考微信官方文檔 https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Access_Overview.html 開發→基本配置 公眾號開發信息 註:1.記錄好開發者密碼,會在程式中驗證過程 ...
x