开发问题记录

1.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>

JZTXT

开发问题记录

开发问题记录

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