最初實現：
echarts圖標被單獨作爲一個組件引入，通過傳入數據來顯示。
<div class="echart">
<div class="echarts-cont">
<Charts
:dataList="list"
:total="total"
></Charts>
</div>
echarts組件代碼：
export default {
name: "quotoEcharts",
components: {},
props: {
dataList: {
type: Array,
default: () => {
return []
}
},
total: {
type: [Number, String],
default: 0
},
},
data() {
return {
};
},
computed: {},
created() { },
mounted() {
this.$nextTick(() => {
this.echartsInit()
console.log("total:", this.total)
console.log("dataList:", this.dataList)
})
},
發現mounted中打印dataList和total根本就是空的，難道數據沒有傳過來？因爲數據是通過ajax請求獲取的，而組件的加載是走的生命週期函數式同步行爲。所有子組件echats在mounted裏沒有數據
解決思路：
讓子組件echats.vue在數據加載完成以後出現。也就能保證echrats裏mounted生命週期裏一定有數據。所以解決思路：
<div class="echart">
<div class="echarts-cont">
<Charts
v-if="list.length>0" //注意這裏list.length>0
:dataList="list"
:total="total"
></Charts>
</div>
問題解決。