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

问题：

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; } }, }

 

解决方法：

在父组件异步请求成功后再初始化子组件，引用子组件时添加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中打印为非空数组。