vue3父组件异步获取数据,传入子组件没有获取到值

1,769 阅读1分钟

vue3父组件异步获取数据,传入子组件没有获取到值

当我们父组件去异步请求数据后,返回来的数据传输给子组件,可能在子组件获取不到,那是因为:父组件获取数据的过程中,我们的子组件可能已经渲染完毕了,因此我们在子组件获取不到数据。

父组件代码

<Card :houseData="houseData"></Card>

<script setup>
let houseData = ref([])
const getApplyViewFn = async function() {
    houseData.value = await getData() // 异步获取后台数据
}
</script>

子组件Card

<script setup>
let props = defineProps({
  houseData: {
    type: Array
  }
})
watch(
    () => props.houseData, //这样才可以检测到对象里面的值
    () => console.log('watch', props.houseData)
)
</script>

这样我们就可以在子组件获取到数据啦。