记一次props延时传值的问题

最新推荐文章于 2024-07-01 17:09:45 发布

九族高兴的摸不到头脑

最新推荐文章于 2024-07-01 17:09:45 发布

阅读量1.6k

点赞数 3

文章标签：前端微信小程序 vue

本文链接：https://blog.csdn.net/XXCJLRC/article/details/124944329

版权

本文介绍了在Vue开发过程中，如何处理父组件通过props传递给子组件时可能遇到的空值问题。主要提供了两种解决方案：1) 使用`this.$nextTick`确保在数据更新后再执行相关操作；2) 利用`updated`生命周期钩子，在数据变化后执行后续代码，确保子组件能接收到非空的props值。

摘要由CSDN通过智能技术生成

今天在写代码的时候，发现父组件在使用props给子组件传值时，尤其是当这个值还是从接口获取的数据，则很可能发生子组件接受到的值为空值，从网上找到了一些解决办法，以此来记录一下。

1.this.$nextTick(()=>{})方法

在你子组件的created生命周期里边，将用到从父组件穿来的props属性中的元素，使用this.$nextTick包裹起来，这样他就会在你数据更新结束后才会进行this.$nextTick方法体内的内容。

实例：

if (that.cards.length>0) {
				this.$nextTick(()=>{
					if (that.cards[0].num > 0) {
						//后续操作
					} else {
						//后续操作
					}
				})
				
			}

updated会在界面数据发生变化时执行，将后续的操作代码，放在updated方法中，当父组件从接口获取数据并传给子组件是，界面也就会跟着更新，重新拿到不为空的props值。

关注