vue組件通訊之provide / inject

什么是 provide / inject [傳送門]

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

 provide/inject  是 Vue.js 2.2.0 版本后新增的 API，在文檔中這樣介紹 ：

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

provide 選項應該是一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。在該對象中你可以使用 ES2015 Symbols 作為 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的環境下可工作。

inject 選項應該是：

• 一個字符串數組，或
• 一個對象，對象的 key 是本地的綁定名，value 是：
  • 在可用的注入內容中搜索用的 key (字符串或 Symbol)，或
  • 一個對象，該對象的：
    • from 屬性是在可用的注入內容中搜索用的 key (字符串或 Symbol)
    • default 屬性是降級情況下使用的 value

提示：provide 和 inject 綁定並不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的對象，那么其對象的屬性還是可響應的。

並且文檔中有如下提示：
provide 和 inject 主要為高階插件/組件庫提供用例。並不推薦直接用於應用程序代碼中。

使用的例子：

// 父級組件提供 'foo'
var Provider = {
    provide: {
        foo: 'bar'
    },
}

// 子組件注入 'foo'
var Child = {
    inject: ['foo'],
    created () {
        console.log(this.foo) // => "bar"
     }
}