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>

此文僅作爲開發過程中的問題記錄。如有錯漏請告知。