Error in callback for watcher “xxx“: xxx is undefined

使用背景:

在最近的项目中,使用父子组件传值时,遇到了这个问题
最开始使用v-bind,然后子组件使用props接收父组件传过来的值这种方法的
父组件:

在这里插入图片描述

子组件:

在这里插入图片描述

但是,发现子组件在dom第一次渲染的时候拿不到props,只有再次渲染才会拿到
所以改为使用给子组件绑定ref,然后使用this.$refs的方法去改变子组件的某个值

在这里插入图片描述
在这里插入图片描述

但是使用ref还是遇到了同样的问题,并且在第一次渲染的时候还会报子组件属性为undefined的错误

在这里插入图片描述

问题原因:

因为组件所在的渲染方式为动态渲染,而ref和vue2 的props不是响应式的,如果是vue3,props就是响应式的了
在我这里是因为我的父组件为dialog由visible控制显隐,所以每次动态渲染数据无法动态及时响应
动态渲染的还有v-if,或者其他需要动态显隐的组件等,如果使用父子组件传值会因为不是响应式而产生问题

解决方法:

使用setTimeout方法,将延时时间设置为0,做一个立即执行
在这里插入图片描述
如果使用props解决方法也是一样的,在父组件给要传递给子组件那个值赋值的时候使用setTimeout,当然这只是我找出来的一种方法,如果有其他方法请留言告知

猜你喜欢

转载自blog.csdn.net/weixin_45717984/article/details/127534879
xxx