vue 父组件ajax异步请求，子组件没有获取到父组件传值的问题

   vue 父组件使用ajax异步请求获取数据，由于是异步获取，所以子组件mounted阶段，ajax仍未完成请求，子组件props获取不到数据。

  解决方法：

第一步：子组件中使用watch，监听传参的变化，执行方法逻辑。

第二步：子组件created延时执行方法逻辑。

第三步：父组件中引用子组件使用v-if做判断，有数据时再加载子组件。

第四步：父组件beforeDestroy方法，设置清空数据源。

代码如下：

父组件：

<template>
  <div>
    <Jtopo :fishboneData="dataSource" v-if="dataSource" />
  </div>
</template>

<script>
  import Jtopo from '../../components/Jtopo'
  import {mapActions, mapState, mapMutations} from 'vuex'

  export default {
    data () {
      return {
      }
    },
    name: 'Fishbone',
    components: {Jtopo},

    created() {
      this.getFishBoneDataList();
    },

    computed: {
      ...mapState('taskResourceAllocation', [
        'dataSource',
        'loading',
      ]),
    },

    beforeDestroy() {
      this.setDataSource({
        payload: {
          dataSource: null
        }
      });
    },

    methods: {
      ...mapActions('taskResourceAllocation', [
        'generateFishBoneDataList',
      ]),

      ...mapMutations('taskResourceAllocation', [
        'setDataSource'
      ]),


      //获取鱼骨图数据
      getFishBoneDataList() {
        let data = new FormData();
        data.append('taskId', "TV9939");
        data.append('taskType', "I");
        data.append('taskDay', "2020-01-13");
        this.generateFishBoneDataList(data);
      },
    }
  }
</script>

子组件：

<template>
  <div id="content" style="width:100%">
    <br/>
    <canvas id="canvas" ref="canvas" style="background-color: rgb(238, 238, 238);width:1300px;height:800px"></canvas>
  </div>
</template>

<script>
  export default {
    name: 'Jtopo',
    props: {
      fishboneData: {
        type: Object,
        default () {
          return {
            name: '',
            children: null
          }
        }
      }
    },
    created(){
      setTimeout(() => {
        this.initTopo()
      }, 1000)
    },
    watch: {
      fishboneData (newVal,oldVal) {
        if (newVal.children && newVal.children.length > 0) {
          this.initTopo()
        }
      }
    },
    methods: {
      initTopo () {
        let canvas = this.$refs.canvas
        if (this.fishboneData) {
          let mfb = new MakFishBone(canvas, {data: this.fishboneData})
          mfb.start()
        }
      }
    }
  }
</script>

此文仅作为开发过程中的问题记录。如有错漏请告知。