常用的父子元件通訊方式都是父元件繫結要傳遞給子元件的資料，子元件通過props屬性接收，一旦元件層級變多時，採用這種方式一級一級傳遞值非常麻煩，而且程式碼可讀性不高，不便後期維護。
vue提供了provide和inject幫助我們解決多層次巢狀巢狀通訊問題。在provide中指定要傳遞給子孫元件的資料，子孫元件通過inject注入祖父元件傳遞過來的資料。

provide

是一個物件，或者是一個返回物件的函式。裡面呢就包含要給子孫後代的東西，也就是屬性和屬性值。注意：子孫層的provide會掩蓋祖父層provide中相同key的屬性值

provide: {

　　msg: 'hello world!
 
'

}

inject

一個字串陣列，或者是一個物件。屬性值可以是一個物件，包含from和default預設值，from是在可用的注入內容中搜索用的 key (字串或 Symbol)，意思就是祖父多層provide提供了很多資料，from屬性指定取哪一個key;default指定預設值。

 inject: {
      msg: {
        from: 'msg',
        default: ''
      }
 }

其實，provide 和 inject 主要為高階外掛/元件庫提供用例。並不推薦直接用於應用程式程式碼中。因為資料追蹤比較困難，不知道是哪一個層級聲明瞭這個或者不知道哪一層級或若干個層級使用了。

轉載於：https://www.cnblogs.com/qingheshiguang/p/15049465.html