vue祖孙组件通信传值 provide 与 inject 以及 数据的响应式
通常，当我们需要从父组件向子组件传递数据时，我们使用 props。但是对于一些深度嵌套的组件，深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。
provide 和 inject无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。解决了跨层级传递属性的不方便。
一、概念解析
- 成对出现：provide和inject是成对出现的
- 作用：用于父组件向子孙组件传递数据
- 使用方法：
- provide在父组件中返回要传给下级的数据;
- inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
- 使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据
二、用法解析
1 provide
在 祖辈组件的provide 中指定要传递给子孙组件的数据。
data() {
return {
data:"给子孙的数据"
}
},
provide() {
return {
data: this.data
}
},
2 inject
子孙组件通过inject注入祖父组件传递过来的数据。
// inject用来指定一个数组或者一个对象，数组的话就放provide里字段的名称，而对象的话可以指定
data() {
return {}
},
inject: ['data'],
inject: {
data: {
from: 'data',
default: ""
}
}
但是此时data并不是响应式的数据.....
provide和inject绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
provide和inject数据响应式的解决方案
一、把值转为函数，记得要用箭头函数，不然不能正确获取this
data () {
return {
data: ""
}
}
provide() {
return {
data: () => {
return this.data;
},
};}
然后使用时就要变成了函数的调用
inject: ['data'],
computed: {
data1() {
return this.data()
}
}
此时当祖辈组件的data改变时， 子组件中data1的值也会改变
二、把provide所在的Vue实例给传递下去
data () {
return {
data: ""
}
}
provide() {
return {
ParentCom: this，
};
}
在子组件使用时：
inject: ['ParentCom'],
methods：{
data_func () {
console.log(ParentCom.data)
}
}
之所以官方文档对此特性语焉不详，就是因为从他们的出发角度看不是特别推荐使用它，同时也怕开发者滥用。而从业务开发的角度来讲，绝大部分场景应该选用Vuex而不是provide/inject。 Vuex背后是原型链和响应式，并没有用到provide/inject。文章来源：https://www.toymoban.com/news/detail-631882.html
小心内存泄漏!
这个问题是最近在实际开发中发现的，其实正中了官方所担心的使用不恰当的问题。
起因是provide里提供了一个方法，在子组件里调用这个方法，把子组件里的图表实例传递进去Hold住，以便将来调用。这样一来，图表的实例相当于一直存在于内存里而无法被回收掉，没过多久页面就卡顿的不行了。文章来源地址https://www.toymoban.com/news/detail-631882.html
到了这里，关于vue祖孙组件通信传值 provide 与 inject 以及 数据的响应式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
