父组件axios调用接口获取数据传给子组件,而子组件需要在mounted声明函数中使用这个数据,正常情况下是取不到的,因为调用接口属于异步任务,初始的chartData为空值。
此时可以通过以下方式处理:
父组件
<chart-card : chartData="chartData"></chart-card>
<script>
export default {
data() {
return {
chartData:{}
}
},
created() {
axios.get('/frontlog').then(res=>{
this.chartData = res
})
}
}
</script>
子组件
<template>
<div>
<a-card>
<div></div>
</a-card>
</div>
</template>
<script>
export default {
name: 'ChartCard',
props: {
chartData: {
type: Object,
default() {
return {
xData: [],
yData: []
}
}
}
...
},
data() {
return {
handleData:{}
}
},
watch:{
chartData(val) {
this.handleData = val
}
},
mounted() {
this.fn()
},
methods:{
fn() {
console.log(this.handleData);
}
}
}
</script>
<style></style>
利用watch监听props接受的数据,当chartData异步接受到数据之后,便可以直接用handleData。