在小程序组件间通信中,根据加载顺序,子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是一直拿依赖计算,任何流程都在监视
页面展示成功