vue3父子组件props传值(接口返回的动态数组), 子组件怎么获取value值?

Question

父组件:

<template>
<child :archive='state.data' />
</template>

<script setup>
const state = reactive({
    data: []
})

function getData(){
    // 模拟请求接口返回的数据
    let res = [{
                year:2022,
                declareType: "0",
                declareTypeName: "初次申报"
                ......
            }] 
    state.data = res
}
</script>

子组件child.vue:

<script setup>
const props = defineProps({
  archive: {
    type: Array,
    default: () => [],
  },
});

console.log("props--------", props);
console.log("props.archive--------", props.archive);

const { archive } = toRefs(props);

console.log("archive--------", archive);
console.log("archive.value--------", archive.value);
</script>

子组件打印如下, 无法获取archive里的数据

Answer 1

子组件对应的钩子执行与vue2.x里面的一样，优先于父组件执行。更何况你在父组件中还调用了接口动态获取数据的操作，所以子组件接收到从父组件通过接口动态处理后的数据会出现拿不到的情况，可以在子组件中通过watch来监听父组件传递过来的数据来进行处理。