vue 多層級嵌套組件傳值 provide 和 inject

常用的父子組件通信方式都是父組件綁定要傳遞給子組件的數據，子組件通過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 主要為高階插件/組件庫提供用例。並不推薦直接用於應用程序代碼中。因為數據追蹤比較困難，不知道是哪一個層級聲明了這個或者不知道哪一層級或若干個層級使用了。