vue3父组件异步props传值，子组件接收不到值问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3父组件异步props传值，子组件接收不到值问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

当我们使用vue3进行开发在创建组件的时候，子组件经常需要调用父组件的数据，那么这是就需要vue3的props进行对父组件与子组件通信来达到传值的效果

问题描述

在使用props进行父子组件通信时，子组件无法成功渲染数据，导致拿到数据为空问题

原因分析：

提示：这里填写问题的分析：

在使用props进行父子组件通信时，如果父组件的数据是同步数据的话，那么这时子组件拿到的数据就可以直接的渲染在视图上面这就是我们所说的同步渲染；但如果父组件的数据是通过异步获取的，那么这时子组件拿到的数据属于异步渲染数据，也就是说当子组件在拿数据的过程中还没完全拿到数据就已经开始渲染了这就导致了子组件拿到数据后就已经渲染完成数据了，那么也就无法成功渲染异步数据

解决方案：

提示：这里填写该问题的具体解决方案：

其实子组件是已经成功拿到数据了，只是渲染提前了导致无法成功渲染出来；那么我们这时可以使用vue3的watch来进行监听props所拿到的数据，之后在进行渲染文章来源地址https://www.toymoban.com/news/detail-508747.html

<script lang="ts">
export default {
  props: {
    contentText: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    // 监听输出内容变化
    watch(() => props.contentText, (newVal: any) => {
      valueHtml.value = newVal;
    })
  }
}
</script>

到了这里，关于vue3父组件异步props传值，子组件接收不到值问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！