vue-组件通信之provide/inject

一般父传子用的都是props
但是如果我们想要实现的是爷爷传给孙子，再去用props就比较麻烦了，中间还会经过爸爸。
所以我们可以使用provide/inject，孙子就可以直接用爷爷的东西啦，provide不关心去处，inject不关心来处。
写法也非常的简单，但是一定要注意存在爷孙关系。

爷爷的代码

provide(){return {name:"张三"}}

孙子的代码

inject:["name"]  //注意一定是列表

按照上面的写法虽然能够将值传过去，但是并不是响应式的，如何能够让其响应式呢？传对象即可。

爷爷的代码

 provide(){return {obj:this.obj      //传入一个响应式对象}},data(){return {obj:{name:"张三"}}},onLoad(){this.change()},methods:{change(){this.obj.name = "李四"}}

孙子的代码

//使用
{{obj.name}}
//接收响应式对象
inject:["obj"]    </script>