子组件通过v-if 来控制显示隐藏与 ref ,DOM渲染的问题!

时间:2024-05-22 21:45:56

注释:通过v-if来控制子组件显示隐藏,然后发现子组件的this.$refs都是undefind.的问题

首先是父组件通过 poprs来进行传递数据控制子组件的显示隐藏。

 

子组件通过v-if 来控制显示隐藏与 ref ,DOM渲染的问题!子组件再父组件的引用

 

子组件是通过该属性然后v-if来控制显示隐藏。

子组件通过v-if 来控制显示隐藏与 ref ,DOM渲染的问题!

然后操作就是获取子组件的$refs的DOM元素,结果发现获取不到,再mothed里面也是获取不到的。

子组件通过v-if 来控制显示隐藏与 ref ,DOM渲染的问题!

子组件通过v-if 来控制显示隐藏与 ref ,DOM渲染的问题!

后面查资料后发现,refs不是动态,需要等页面渲染完成后才能拿到DOM元素。

子组件通过v-if 来控制显示隐藏与 ref ,DOM渲染的问题!

问题清晰后,有几种方法可以解决,就是解决v-if当中渲染完成后再进行操作ref。

1,可以采用 定时器(不推荐)

2,用this.$nextTick来进行判断当前是否数据和dom已经加载完成了

子组件通过v-if 来控制显示隐藏与 ref ,DOM渲染的问题!

可以再请求数据的后面then里面写,也可以写在数据获取到后外面方法上面,都是可以实现的。