vue的provide/inject实现响应式数据监听

描述&＃xff1a; provide/inject 这对选项需要一起使用&＃xff0c;以允许一个祖先组件向其所有子孙后代注入一个依赖&＃xff0c;不论组件层次有多深&＃xff0c;并在起上下游关系成立的时间里始终生效。

• 无论多少层都会被子组建拿到
• 主要用在高阶组件
• provide 选项应该是一个对象或返回一个对象的函数。
• inject 选项应该是&＃xff1a;一个字符串数组&＃xff0c;或 一个对象&＃xff0c;对象的 key 是本地的绑定名

提示&＃xff1a; provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而&＃xff0c;如果你传入了一个可监听的对象&＃xff0c;那么其对象的属性还是可响应的。 - 官方提示

正常使用

父组件&＃xff1a;

var Provider &＃61; {provide: {name: &＃39;zs&＃39;}
}


子组件&＃xff1a;

var Child &＃61; {inject: [&＃39;name&＃39;],created () {console.log(this.name) // &＃61;> "zs"}
}


按照上边的例子&＃xff0c;发现如果修改了Provider的name值&＃xff0c;Child的name并没有随着更改。官网也说了provide并不是响应的。为了解决这个问题 需要把name变成vue的监听的对象&＃xff0c;换句话说就是需要把name变成对象

响应式数据监听处理

例如&＃xff1a;监听窗口的改变&＃xff0c;将改变的值传递给其他需要的子组件&＃xff0c;window.resize只能监听一次。
父组件&＃xff1a;

data () {return {screenObj: { // 当前屏幕的宽度&＃xff0c;用于响应式处理screenWidth: document.body.clientWidth}}
},
provide () { // 将datas属性提供给子孙组件return {clientWidth: this.screenObj}
},
mounted () {window.onresize &＃61; () &＃61;> {// 监听窗口变化并将数据响应到子孙组件this.screenObj.screenWidth &＃61; document.body.clientWidth;}this.$once(&＃39;hook:beforeDestroy&＃39;, () &＃61;> {window.removeEventListener("resize", () &＃61;> {});})
}


子组件&＃xff1a;

inject: [&＃39;clientWidth&＃39;], // 接收父组件注入的内容
watch: {clientWidth: {handler (value) {this.dynamicCompute(value.screenWidth); // 可以监听到clientWidth的改变},immediate: true,deep: true}
},


这样就可以进行响应式处理了&＃xff0c;provide提供的对象数据改变之后&＃xff0c;子孙组件都可以监听到