使用背景:
在最近的项目中,使用父子组件传值时,遇到了这个问题
最开始使用v-bind,然后子组件使用props接收父组件传过来的值这种方法的
父组件:
子组件:
但是,发现子组件在dom第一次渲染的时候拿不到props,只有再次渲染才会拿到
所以改为使用给子组件绑定ref,然后使用this.$refs的方法去改变子组件的某个值
但是使用ref还是遇到了同样的问题,并且在第一次渲染的时候还会报子组件属性为undefined的错误
问题原因:
因为组件所在的渲染方式为动态渲染,而ref和vue2 的props不是响应式的,如果是vue3,props就是响应式的了
在我这里是因为我的父组件为dialog,由visible控制显隐,所以每次动态渲染数据无法动态及时响应
动态渲染的还有v-if,或者其他需要动态显隐的组件等,如果使用父子组件传值会因为不是响应式而产生问题
解决方法:
使用setTimeout方法,将延时时间设置为0,做一个立即执行
如果使用props解决方法也是一样的,在父组件给要传递给子组件那个值赋值的时候使用setTimeout,当然这只是我找出来的一种方法,如果有其他方法请留言告知