一、业务场景
点击对应歌单,通过歌单id获取歌单数据以及可播放列表
主页与歌单组件是父子组件关系,通过父子组件传值,将要显示的信息展示到子组件
二、问题描述
父组件值还没有传递过来,子组件的页面在就进行渲染,此时值为undefined,报错
因为父组件的monted在子组件的created和mounted之后
先了解父子组件生命周期的顺序关系
一个组件的生命周期
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判断,等到数据获取到之后在渲染页面,这种方法页面加载有一定延迟
文章评论