vue中父组件异步获取数据给子组件传参

最新推荐文章于 2024-09-13 11:22:15 发布

阿然然然

最新推荐文章于 2024-09-13 11:22:15 发布

阅读量1.7k

点赞数 3

本文链接：https://blog.csdn.net/weixin_40800926/article/details/103291860

版权

问题：

inferenceData:是父组件异步请求后获取的数据，获取成功之后父组件给子组件传递此数据，子组件使用，子组件获取不到inferenceData的值，打印结果为空数据，结果没有传递过去。

原因：异步请求还未获取到结果，已经初始化加载了子组件。

父组件：

 <el-main  v-loading="loading"
                          element-loading-text="拼命加载中"
                          element-loading-spinner="el-icon-loading"
                          element-loading-background="rgba(0, 0, 0, 0.8)" class="xb-main-table prescription-left-home xb-bg">
                    <Inference :inferenceData="inferenceData" :sendIndex="sendIndex"  :visitId="visitId"></Inference>
                </el-main>

created(){
    this.getInference();
},
methods:{
    async getInference() {
                const response = await inference(this, this.visitId);
                const data = response.data;
                console.log('----------------------获取推演图数据接口-------------------')
                console.log(data)
                if(response.code == 0){
                    for(var i = 0; i < data.length; i ++){
                        data[i].prescData = JSON.parse(data[i].prescData);
                        data[i].transferData = JSON.parse(data[i].transferData);
                    }
                    this.drugState = data[0].drugState;
                    this.treat = data[0].treat;
                    this.disease = data[0].disease;
                    //签名时默认传推演图第一个id，药方第一个id；
                    this.inferenceTransferId = data[0].id;
                    this.prescriptionDataList = data[0].prescData;//签名时默认第一个药方药材；
                    this.inferenceData = data;//非空的数组
                    this.loading = false;
                }

            },
}

子组件：

 props:{
            inferenceData:Array
        },
        mounted() {
console.log(this.inferenceData)//空数组。
            this.initCharts();
        },
methods:{
    initCharts(){
                let myChart = this.$echarts.init(this.$refs.chart);
                myChart.setOption(option);
                var myChartData = this.inferenceData[this.sendIndex].transferData;
                this.data = myChartData.data;
                this.links = myChartData.links;
                myChart.setOption({
                    series: [{
                        data: this.data,  //将异步请求获取到的数据进行装载
                        links:this.links
                    }]
                })
            }
}

解决方法：

在父组件异步请求成功后再初始化子组件，引用子组件时添加v-if="flag"

flag初始化为：false.

在异步请求成功后更改flag状态为true。

<el-main  v-loading="loading"
                          element-loading-text="拼命加载中"
                          element-loading-spinner="el-icon-loading"
                          element-loading-background="rgba(0, 0, 0, 0.8)" class="xb-main-table prescription-left-home xb-bg">
                    <Inference  v-if="flag" :inferenceData="inferenceData" :sendIndex="sendIndex"  :visitId="visitId"></Inference>
 </el-main>

async getInference() {
                const response = await inference(this, this.visitId);
                const data = response.data;
                console.log('----------------------获取推演图数据接口-------------------')
                console.log(data)
                if(response.code == 0){
                    for(var i = 0; i < data.length; i ++){
                        data[i].prescData = JSON.parse(data[i].prescData);
                        data[i].transferData = JSON.parse(data[i].transferData);
                    }
                    this.drugState = data[0].drugState;
                    this.treat = data[0].treat;
                    this.disease = data[0].disease;
                    //签名时默认传推演图第一个id，药方第一个id；
                    this.inferenceTransferId = data[0].id;
                    this.prescriptionDataList = data[0].prescData;//签名时默认第一个药方药材；
                    this.inferenceData = data;
                    this.loading = false;
                    this.flag = true;//状态更改
                }

            },

此时子组件在mounted中打印为非空数组。

其余解决方法：https://www.cnblogs.com/goloving/p/9114389.html