美文网首页vuevuereact & vue & angular
Vue组件传值异步问题--子组件拿到数据较慢

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

作者: koi_li | 来源:发表于2022-06-26 08:47 被阅读0次

问题出现

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

产生原因

子组件中的 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'/>

相关文章

  • vue组件间传值问题总结

    vue项目中,组件间传值的问题总结: 父传子 父组件 子组件 上面父组件和子组件之间的传值是模拟接口请求数据,然后...

  • 组件传值(父组件传值给子组件)

    组件传值(父组件传值给子组件)不可在子组件中修改父组件的值,可以通过深拷贝。在子组件中拷贝一份数据app.vue:...

  • Vue - 传值

    Vue 传值有两种:1)父组件向子组件传值(属性传值,Prop传值)2)子组件向父组件传值 一、父组件向子组件传值...

  • iView学习

    父组件向子组件传值 子组件向父组件传值 父组件向子组件传递数据双向绑定问题 注意:声明周期问题 data() 加载...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • Vue组件传值

    vue组件传值 一、父组件向子组件传值方式: 1. 子组件中定义props,父组件向子组件props进行传值。 2...

  • 04vue2.0-Vue组件化-组件间的数据传递

    Vue组件之间传值 父组件向子组件传值 1.父组件向子组件传值 父组件发送的形式是以属性的形式绑定值到子组件身上。...

  • vue 组件之间的传值

    vue父组件给子组件传值 父组件给导入的子组件绑定一个数据:title是父组件的数据 2 子组件获取数据. pr...

  • vue中父组件获取子组件的值

    vue项目中,普遍存在父组件和子组件相互传值的问题,父组件向子组件传值用props,但是如果此时要修改父组件传的值...

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/seygvrtx.html