今天在写代码的时候,发现父组件在使用props给子组件传值时,尤其是当这个值还是从接口获取的数据,则很可能发生子组件接受到的值为空值,从网上找到了一些解决办法,以此来记录一下。
1.this.$nextTick(()=>{})方法
在你子组件的created生命周期里边,将用到从父组件穿来的props属性中的元素,使用this.$nextTick包裹起来,这样他就会在你数据更新结束后才会进行this.$nextTick方法体内的内容。
实例:
if (that.cards.length>0) {
this.$nextTick(()=>{
if (that.cards[0].num > 0) {
//后续操作
} else {
//后续操作
}
})
}
2.updated生命周期钩子函数
updated会在界面数据发生变化时执行,将后续的操作代码,放在updated方法中,当父组件从接口获取数据并传给子组件是,界面也就会跟着更新,重新拿到不为空的props值。