vue父组件异步获取数据子组件不显示

最新推荐文章于 2024-04-18 16:24:09 发布

云轻i

最新推荐文章于 2024-04-18 16:24:09 发布

阅读量2.8k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42087300/article/details/107016993

版权

在Vue中，父组件异步获取的数据可能会导致子组件初始化时无法正确显示。解决方法包括：1) 数据获取后延迟渲染，但这可能影响用户体验；2) 子组件监听props变化，但大量操作可能导致多次调用；3) 使用Vuex状态管理，子组件直接调用actions，mapActions在打印数据后执行，而$dispatch先执行接口调用。

摘要由CSDN通过智能技术生成

这个问题遇到很多次，就是父组件中通过接口获取的数据，传给子组件，在子组件打印是空的

原因：接口获取数据需要时间，而在这个数据没有获取到之前，子组件已经渲染完成，自然就拿不到数据了

目前测试的有效的方法：

1.当这个数据获取到的时候，再进行渲染，

局限: 如果是弹框获取的话，就会产生一秒之后弹框才会出来的现象，影响界面效果

//子组件
<claimPerson 
	ref='person' 
	v-if='JSON.stringify(list) !== "{}"'
	:parentMessage='list' 
/>
//在子组件中 watch 监听，父组件获取到值，这个值就会变化，自然是可以监听到的
 watch:{
   
    parentMessage:{
   
      deep:true,
      handler:function(newVal,oldVal) {
   
        this.$nextTick(() => {
   
          this.parentMessage = newVal
        })
      }
    }
}