位置: IT常识 - 正文

vue子组件监听父组件数据变化并作出改变（亲测有效）(vue子组件监听父组件)

编辑：rootadmin

vue子组件监听父组件数据变化并作出改变（亲测有效） vue子组件监听父组件数据变化并作出改变（亲测有效）1. 问题1.1 封装组件时经常会遇到子组件需要根据父组件数据变化并执行对应的操作逻辑1.2 监听方法中加了deep、immediate 等参数监听数组/对象还是没有生效1.3 类型table组件需要根据父组件数据变化对表格数据进行更新1.4 根据数据动态渲染组件需实时监听父组件变化1.5 使用$refs 有些时候很难找到嵌套组件的ref2. 思路2.1 本文章主要的思路就是 provide / inject

推荐整理分享vue子组件监听父组件数据变化并作出改变（亲测有效）(vue子组件监听父组件)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue子组件监听父组件传过来的数组变化,vue子组件监听父组件变化watcheffect,vue子组件监听父组件,vue子组件监听父组件数据,vue子组件监听父组件事件,vue子组件监听父组件属性变化,vue子组件监听父组件传值变化,vue子组件监听父组件属性变化,内容如对您有帮助，希望把文章链接给更多的朋友！

2.2 创建父组件时，无论有多少层级的子组件都可以进行数据的相互依赖2.3 那么在子组件可以利用这些依赖对父组件数据进行监听3. 解决方法3.1 首先在父组件定义 provide，代码如下//父组件提供参数给子组件（响应式时需设置为对象）provide(){ return { superParams:this }},data(){ //定义几个参数return {test:{ testLevel1:{ testLevel2:'' } }, testList:[]}}3.2 子组件添加 inject，代码如下// 子组件：childrenComponent1inject: ['superParams'],watch:{ //监听数据变化 'superParams.test':{ immediate:true, // 将立即以表达式的当前值触发回调 handler:function (val,oldVal) { console.log("监听test对象"); console.log(val,oldVal); }, deep:true, }, 'superParams.test.testLevel1':{ immediate:true, // 将立即以表达式的当前值触发回调 handler:function (val,oldVal) { console.log("监听testLevel1属性"); console.log(val,oldVal); }, deep:true, }, 'superParams.test.testLevel1.testLevel2':{ immediate:true, // 将立即以表达式的当前值触发回调 handler:function (val,oldVal) { console.log("监听testLevel1属性"); console.log(val,oldVal); }, deep:true, }, 'superParams.testList':{ immediate:true, // 将立即以表达式的当前值触发回调 handler:function (val,oldVal) { console.log("监听testList数组"); console.log(val,oldVal); }, deep:true, }}3.3 另外一个子组件触发父组件数据变化（同/不同层级都可以触发）// 子组件：childrenComponent2inject: ['superParams'],mounted(){ this.superParams.test.testLevel1.testLevel2 = 'testLevel22'; this.superParams.testList.push({test:'test'})}举例一（子组件按顺序展示）：先显示childrenComponent2 ，再到childrenComponent1，（下图的数据在childrenComponent1展示后输出）结果如图所示

举例二（子组件都展示, 在父组件或其他地方触发数据更新） vue子组件监听父组件数据变化并作出改变（亲测有效）(vue子组件监听父组件)

在父组件添加一个按钮点击触发方法代码如下

updateText(){ console.log("Text数据更新"); this.test.testLevel1.testLevel2 = 'testLevel22'; this.testList.push({test:'test'})}

结果如下图所示

注意当前组件监听方法数据作出了改变，但组件却没有更新，这时需在组件本身找更新原因组件显示时会对监听方法进行初始化对于对象存在多层的监听问题，可监听整个对象对于数组会不会存在漏监听的情况，经测试调用数组的pop、push、shift、unshift、splice、sort、reverse等方法时是可以监听到数组的变化immediate、deep 要了解补充