周亚博的个人博客

  • 首页
  • 盛夏光年
  • 陪风去荡
  • 布响丸啦
我频繁记录着 因为生活值得
  1. 首页
  2. 布响丸啦
  3. 正文

记录一次父子组件异步数据渲染的问题

2022-08-07 85点热度 1人点赞 0条评论

一、业务场景

点击对应歌单,通过歌单id获取歌单数据以及可播放列表

image-20220807223804114

主页与歌单组件是父子组件关系,通过父子组件传值,将要显示的信息展示到子组件

二、问题描述

父组件值还没有传递过来,子组件的页面在就进行渲染,此时值为undefined,报错

因为父组件的monted在子组件的created和mounted之后

image-20220807225829406

先了解父子组件生命周期的顺序关系

一个组件的生命周期

beforeCreate ——> created ——> beforeMount ——> mounted ——> beforeUpdate ——> update ——> beforeDestroy ——> destroyed

父组件结合子组件之后

父beforeCreate ——> 父created ——> 父beforeMount ——> 子beforeCreate ——> 子created ——> 子beforeMount ——> 子mounted ——> 父mounted ——> 父beforeUpdate ——> 子beforeUpdate ——> 子updated ——> 父updated ——> 父beforeDestroy ——> 子beforeDestroy ——> 子destroyed ——> 父destroyed

所以产生了以上的原因

三、解决方案

  • 在父组件created生命周期发起请求,在子组件创建之前就获得数据

  • 给子组件页面添加v-if判断,等到数据获取到之后在渲染页面,这种方法页面加载有一定延迟

image-20220807230254558

标签: vue 异步
最后更新:2022-08-07

粥呀Bo

所谓惊喜,就是苦苦等候的兔子来了,后面却跟着狼

点赞
下一篇 >

文章评论

取消回复
目录
  • 一、业务场景
  • 二、问题描述
  • 三、解决方案

COPYRIGHT © 2022 zhouyaker.cn. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

陕ICP备2022009272号