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 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。因为数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了。