解决vue开发时子组件数据和组件渲染的异步问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决vue开发时子组件数据和组件渲染的异步问题相关的知识,希望对你有一定的参考价值。

参考技术A 在开发中有时候会遇到子组件渲染完成了请求也没响应回来的情况
父子组件的钩子并不会等待请求返回,请求是异步的,VUE设计也不能因为请求没有响应而不执行后面的钩子,因此,偶尔会遇到请求也正常请求了,数据也能在控制台打印出来,但是页面就是没渲染数据的问题,下面总结一下解决方案:

在渲染子组件的时候加上一个条件,data1是父组件调用接口返回的数据。当有数据的时候在去渲染子组件。这样就会形成天然的阻塞。在父组件的created中的请求返回数据后,才会执行子组件的created,mounted。最后执行父组件的mounted。

在父组件请求数据完成并赋值对应的传给子组件的变量后,子组件prop发生改变,子组件watch对应的prop,再做相关操作

以上是关于解决vue开发时子组件数据和组件渲染的异步问题的主要内容,如果未能解决你的问题,请参考以下文章

嵌套组件页面渲染完了还请求不到数据

vue父组件异步获取数据传值给子组件

Vue3 渲染一个可扩展的异步组件列表

Vue开发中遇到的一些问题解决方法

Vue进阶-异步动态加载组件

Vue进阶-异步动态加载组件