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

在小程序组件间通信中,根据加载顺序,子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
			show:{
				type:Boolean,
				default:true
			}            
		},
		data() {
			return {
				
			}
		}
		
	}
</script>

 由于是异步的props,子组件拿到的是父组件中data中的数据

解决办法 通过computed,监听数据变化

子组件

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

<script>
	export default {
		props:{
			show:{
				type:Boolean,
				default:true
			}
		},
		computed:{
			shows(){
				console.log(this.show);
				return this.show
			}
		},
		data() {
			return {
			}
		},
	}
</script>

此时,computed是一直拿依赖计算,任何流程都在监视

 页面展示成功

猜你喜欢

转载自blog.csdn.net/m0_68812159/article/details/127814984
今日推荐