1.前言
vue的父子组件通信用什么？
：prop和$emit的组合。
如果是爷孙组件呢？
：那么就要用父组件来转发数据和事件了。
如果是太爷爷和孙子组件呢？
：当然是vuex啦
emmm 好的，没我啥事了，我这就走。
不行，我还能再挣扎一会儿！肯定有一部分兄弟做的项目比较小，组件通信的情况不是很多，懒得引入vuex，那么provide/inject就是爷孙（不限于爷孙/父子，中间隔了多少级都可以）通信问题的最好解决方案啦！
2.官方文档抄过来的介绍
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide 选项应该是
一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。
inject 选项应该是：
一个字符串数组，或
一个对象(详情点击 这里 )
3.基本用法
// 祖先组件 提供foo
//第一种
export default {
name: "grandfather",
provide(){
return{
foo:'halo'
}
},
}
//第二种
export default {
name: "grandfather",
provide:{
foo:'halo~~~~'
},
}
//后代组件 注入foo
export default {
inject:['foo'],
}上面的两种用法有什么区别吗？
如果你只是传一个字符串，像上面的‘halo’，那么是没有区别的，后代都能读到。
如果你需要传一个对象（如下所示代码），那么第二种是传不了的，后代组件拿不到数据。所以建议只写第一种
//当你传递对象给后代时
provide(){
return{
test:this.msg
}
},注意： 一旦注入了某个数据，比如上面示例中的 foo，那这个组件中就不能再声明 foo 这个数据了，因为它已经被父级占有。
4.什么时候才是可响应的？
如果你使用过vuex，那么你会认为，上面的例子中，如果我把 foo:’halo’ 改成 foo:’world’ ,子组件会及时响应数据变更，视图完成更新。
可惜，没有
在vue官方文档中有这么一句话
提示： provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
这里不探讨vue为什么要这么设计，我这里只展示啥时候provide/inject可响应
provide(){
