Vue 父子组件传值延迟如何解决

Vue 父子组件传值延迟如何解决？

Vue 父子组件传值延迟如何解决？

问题描述：父组件中有一个通过异步的方式请求获取的数组，通过 props 传给子组件渲染页面，子组件页面空白。

原因分析：由于父组件通过异步请求获取数据后，才传递到子组件，导致子组件在渲染时出现延迟。

解决方法：

1.在父组件里使用 v-if，等数据获取成功后再渲染子组件，如下所示：

<!-- 父组件 -->
<template>
  <div>
    <div v-if="dataLoaded">
      <child-component :data="data"></child-component>
    </div>
    <div v-else>数据加载中...</div>
  </div>
</template>

<script>
  import childComponent from './childComponent.vue'

  export default {
    components: {
      childComponent
    },
    data() {
      return {
        data: null, // 存储请求到的数据
        dataLoaded: false // 根据此变量来控制是否显示子组件
      }
    },
    mounted() {
      this.fetchData()
    },
    methods: {
      async fetchData() {
        const result = await getDataFromApi() // 调用异步接口请求数据
        this.data = result
        this.dataLoaded = true // 通过此变量控制是否显示子组件
      }
    }
  }
</script>

2.在子组件内部使用 watch 监听传入的 props 变量，当变量改变时，再进行相应的操作，如下所示：

<!-- 子组件 -->
<template>
  <div>
    <div v-if="dataLoaded">显示数据{{data}}</div>
    <div v-else>数据加载中...</div>
  </div>
</template>

<script>
  export default {
    props: {
      data: {
        type: Array,
        default: null
      }
    },
    data() {
      return {
        dataLoaded: false // 用于判断props.data是否已经加载
      }
    },
    watch: {
      data() {
        this.dataLoaded = true // 当props.data改变时，触发watch方法，更新dataLoaded变量
      }
    }
  }
</script>