Vue组件传值异步问题--子组件拿到数据较慢

简介: Vue组件传值异步问题--子组件拿到数据较慢

问题出现
之前写静态页面的时候,直接父向子传值,是指节能渲染出父组件给子组件的值,但是加上请求后,就会出现请求过慢。就是在组件创建和渲染完毕时,子组件的值才拿到,子组件并没有实时更新模版(灾难始终慢我一步)

产生原因
子组件中的 created 、mounted 只执行一次,在富组件初始化时,已经给子组件传了一个空值,导致异步请求数据发生变化时,子组件的值不再变化
在父组件中,获取数据时会有几秒钟的时间延迟,而异步请求不会阻塞后续代码,所以导致子组件通过props接受数据时拿到的是空数据,通过打印结果显示先执行子组件中props中的代码,导致数据无法渲染。

解决办法
就是没有发请求拿到数据之前,不让他创建子组件并传值,因此给其加 v-if 指令来限制他是否能创建子组件,类似于节流的思想。
在父组件中的子组件,通过v-if判断接口请求的数据是否不为0或者不为空,因为v-if是通过创建DOM显示的,此时通过判断如果子组件有数据的话才传数据

data 数据里面

list : false || null

请求方法里

async getUserinfo() {
   
  const {
    data : res } = await getUserinfo(userid:this.userid)
  this.list = res.data
}

模版子组件处

<Userinfo :list = 'list' v-if = 'list'/>
<Userinfo :list = 'list' v-if = 'list && list.length > 0'/>
目录
相关文章
|
4天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
4天前
|
缓存 JavaScript
Vue中的keep-alive是什么意思?以及如何使用
Vue中的keep-alive是什么意思?以及如何使用
|
JavaScript 前端开发
模拟Vue数据的双向绑定
Vue的数据双向绑定功能一直为人称道, Vue数据的双向数据绑定主要依赖了Object.defineProperty,这里尝试用最简单的代码, 实现数据的双向绑定Demo MVVM ViewModel基本实现原理 Gi...
920 0
|
8天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
40 11
|
8天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
197 65
|
8天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
196 62
|
7天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
24 10
|
7天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
25 9
|
7天前
|
JavaScript 开发者
vue学习(5)
vue学习(5)
22 7
|
8天前
|
JavaScript
vue键盘事件
vue学习(11)键盘事件