Vue+Echart:父组件传数组参数给子组件，但没有传过去，为什么？

Question

我是通过父组件传数组参数给子组件，但没有传过去，请帮助看一下吧，谢谢了！
父组件：

<draw :drawScatterData="drawScatterData"></draw>

<el-button icon="el-icon-search" size="small" @click="lookup">查询</el-button>

methods: {
    lookup() {
      this.axios({
        method: 'get',
        url: 'http://127.0.0.1:8000/app/show_data/',
        params: {
          guanjian: this.guanjian,                    
        }
      }).then((response) => {
        this.mylist = response.data.list
        this.drawScatterData = [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
            ]
      });
    },
}

子组件draw.vue：

<template>
  <div
      class="chart-container"
      ref="chart1"
      :style="{ width: '800px', height: '460px' }"
    >
    {{drawScatterData}}
  </div>
</template>

<script>
export default {
  props: ['drawScatterData'],
  data(){
    return {
      myScatterData:[],
    }
  },
  watch: {
    drawScatterData: {
      handler(val) {
            this.myScatterData = this.drawScatterData;
      },
    }
  },
  mounted() {
    this.drawScatter();
  },
  // created() {
  //   this.myScatterData = this.drawScatterData;
  // },
  methods: {
    drawScatter() {
      let myChart = this.$echarts.init(this.$refs.chart1);
      let option = {
        backgroundColor: '#fff',
        title: {
          text: '里程分布',
          padding:[10,800,0,40],     // 四个数字分别为上右下左与原位置距离
        },
        grid: {
          top: 40,
          bottom: 20,
          left: 20,
          right: 20,
          containLabel: true
        },
        xAxis: {
          name: '日期',
          nameTextStyle: {
            padding: [30, 0, -115, -400]    // [30, 0, -110, -400]四个数字分别为上右下左与原位置距离
          },
          splitLine: { show: true },
          axisLabel:{
            rotate:90,
          },
          data: ["2021-01","2021-02","2021-03","2021-04","2021-05","2021-06"]
        },
        yAxis: {
          name: '里程',
          nameTextStyle: {
            padding: [-60, 20, 0, -200]    // [-60, 0, -20, -220]四个数字分别为上右下左与原位置距离
          },
          nameRotate: 90,
          splitLine: { show: true }
        },
        series: [
          {
            symbolSize: 6,
            data: this.myScatterData,
            type: "scatter",
          },
        ],
      };

      myChart.setOption(option);
      alert(this.myScatterData);
    },
  },

};
</script>

Answer 1

没调用lookup()这个函数，this.drawScatterData当然为空了，你在created调用一下这个函数