vue 父向子传递异步请求数据

父向子传递异步请求数据

由于父子组件生命周期钩子函数执行顺序的问题，父组件向子组件传递异步请求数据，导致子组件接收的数据为空。
可以在父组件中使用flag来控制子组件的渲染时机。
父组件：

// 使用v-bind:子组件接收的数据名称="父组件传递的数据名称"
// 可以进行简写省略掉 -> :dataTypes="dataTypes"
// 使用flag，若父组件请求到数据，子组件才进行渲染
<template>
  <data-type v-bind:dataTypes="dataTypes" v-if="flag"></data-type>
</template>

<script>
// 进行子组件的引用
import DataType from '../components/DataType.vue'
export default {
  components: {
    // 对子组件进行声明
    DataType
  },
  data () {
    return {
      // 这是‘父组件传递的数据名称’的定义
      dataTypes: [],
      // 定义flag
      flag: false
    }
  },
  methods: {
    // 异步请求数据事件
    uploadDataTypes () {
      this.$axios({
        methods: 'get',
        url: 'http://127.0.0.1:4523/mock/711393/dreives',
        data: {}
      }).then(
        (res) => {
          if(res.status === 200){
            this.dataTypes = res.data
            this.flag = true
          }
        }
      )
    })
  }
  mounted () {
    // 在父组件渲染完成后调用异步请求数据事件
    this.uploadDataTypes()
  }
</script>

子组件
子组件接收数据没有特殊要求，和接收同步数据一样

<template>
<div v-for="item in dataTypes" :key="item.index">
  {{ item.id }}
</div>
</template>
<script>
export default {
  // 使用 props 进行接收
  props: {
    // 对‘子组件接收的数据名称’进行声明，需要标明接收数据的类型‘Array’
    dataTypes: Array
  },
  data () {
    return {
      // 重新赋值，避免破坏原数据
      dataTypesTemp: this.dataTypes
    }
  }
}
</script>