解决异步props，子组件获取不到父组件更新后的数据

最新推荐文章于 2024-07-25 13:56:28 发布

阿Y为你痛哭

最新推荐文章于 2024-07-25 13:56:28 发布

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_68812159/article/details/127814984

版权

在Vue.js的子组件中，由于异步props的特性，当父组件的data更新时，子组件可能无法立即获取到最新的数据。为解决此问题，可以使用 computed 属性并监听数据变化，确保子组件始终能反映出父组件数据的最新状态。

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

在小程序组件间通信中，根据加载顺序，子mounted>父mounted，因此在异步的props

中，子组件是拿不到父组件更新后的数据

父组件

<template>
	<view class="content">
		<soncomp :show="show"></soncomp>
	</view>
</template>

<script>
	import soncomp from "../zujian/zujian.vue"
	export default {
		data() {
			return {
				show: false,
			}
		},
		onShow() {
			//模拟异步请求数据
			this.btn()
		},
		components: {
			soncomp
		},
		methods: {
			//模拟异步请求数据
			btn() {
				setTimeout(() => {
					this.show = true
				}, 1000)
			}

		}
	}
</script>

<style>

</style>

子组件

<template>
	<view>
		<view class="" v-if="show"> 
			显示 
		</view>
	</view>
</template>

<script>
	export default {
		props:{
             //此时的show是false