父组件向子组件传递异步参数，子组件获取不到值（开发小记）

问题描述：父组件向子组件传递参数，父组件传递的参数需要通过异步实现赋值，在加载时，会发现子组件可能取不到传递过来的参数。

子组件

<template>
  ....
</template>

<script>
export default {
  props: {
    seriesData: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      var dataArr = this.seriesData;
      .......
    },
  },
}
</script>

父组件

<template>
 .......
     <子组件 :series-data="dataArray"/>
 .......   
</template>

<script>
export default {
  mounted() {
    this.getData();
  },
  data() {
    return {
      dataArray: [],
  },
  methods: {
    async getData() {
      await 请求().then(res => {
          this.dataArray.push({
              value:res.data.value
          })
      })
    },
  },
};
</script>

此时我们会发现子组件的seriesData值可能是获取不到的。

这个时候我们可以在子组件中，对seriesData进行监听，必须seriesData的值发生了变化，才能触发接下来的操作。

  watch: {
    // 深度监听
    deep: true,
    seriesData: {
      handler() {
        this.getData();
      },
    },
  },