问题所在就在于,父组件异步获取数据,传给子组件时候,子组件可能已经渲染出来了,所以数据虽然获取到了,但是并没有渲染。
父组件:
1.从接口获取数据
const annular2 = reactive({
data: [],
id: 'echart'
})
const getBusinessCensusFun = () => {
getBusinessCensus().then((res: any) => {
if (res.code === 200) {
annular2.data = res.data
}
})
}
2.传给子组件
<Annular :annular="annular2" />
子组件:
interface PropsType {
annular: {
data:any,
id:any
};
}
const props = withDefaults(defineProps<PropsType>(), {
annular: () => {
return {
data: [],
id: ''
}
}
})
这个时候打印props,会发现有值,但是页面并没有渲染,这个时候就要用到watch监听传过来的值的数据变化
watch(props.annular, (oldvalue, newvalue) => {
console.log(newvalue) //newvalue就是父组件传过来的数据
//写你想操作的代码
}, { deep: true })