原文地址:https://www.jianshu.com/p/d34a7df4cd6a
provide:Object | () => Object
inject:Array<string> | { [key: string]: string | Symbol | Object }
provide 和 inject 主要為高階插件/組件庫提供用例。並不推薦直接用於應用程序代碼中。是2.2.0版本 新增的。
這對選項需要一起使用,以允許一個祖先組件向其所有子孫后代注入一個依賴,不論組件層次有多深,並在起上下游關系成立的時間里始終生效。
provide 選項應該是一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。在該對象中你可以使用 ES2015 Symbols 作為 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的環境下可工作。
inject 選項應該是:
一個字符串數組,或
一個對象,對象的 key 是本地的綁定名,value 是:
在可用的注入內容中搜索用的 key (字符串或 Symbol),或
一個對象,該對象的:
from 屬性是在可用的注入內容中搜索用的 key (字符串或 Symbol)
default 屬性是降級情況下使用的 value
使用場景:由於vue有$parent屬性可以讓子組件訪問父組件。但孫組件想要訪問祖先組件就比較困難。通過provide/inject可以輕松實現跨級訪問祖先組件的數據
一種最常見的用法是刷新vue組件