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'/>
目录
相关文章
|
17小时前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
2天前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
8 0
|
2天前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
8 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1039 0
|
3天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
19 1
|
2天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
9 1
|
2天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
10 2
|
2天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
9 1
|
2天前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
6 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
3天前
|
JavaScript 索引
vue尚品汇商城项目-day04【25.面包屑处理关键字】
vue尚品汇商城项目-day04【25.面包屑处理关键字】
19 1