vue 父组件传值给子组件错过子组件渲染时机

一根排骨

于 2021-01-29 16:27:34 发布

阅读量625

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 组件传值

本文链接：https://blog.csdn.net/jihezhixin/article/details/113394385

vue 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了前端开发中遇到的一个常见问题——由于请求数据量过大造成的延迟，导致子组件无法及时渲染。作者提出了一种解决方案：在数据获取后设置标志变量，利用Vue的v-if指令控制子组件的显示，从而实现子组件的刷新。通过这种方式，可以确保子组件在数据准备就绪后才进行渲染，避免用户看到空白或错误的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

==> 由于请求的数据量过大，造成了数据延迟，导致子组件渲染时拿不到数据。

前端小白的解决思路

==> 等拿到数据以后，设置一个flag，再使用v-if控制子组件显示，本质就是刷新子组件。

<template>
      <Son
        v-if = "isShow == true"
        :data = "data"
        @save="save"
      >
      </Son>
</template>

<script>
  export default {
    data(){
      return{
        data:{},
        isShow:false
      }
    },
    created() {
        api请求.then(
          (res) =>{
            this.isShow = true;
          }
        )
    },
    }
</script>