脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3父组件异步props传值

vue3父组件异步props传值子组件接收不到值问题解决办法

 更新时间：2024年01月20日 09:15:43   作者：m0_62857167  
这篇文章主要给大家介绍了关于vue3父组件异步props传值子组件接收不到值问题的解决办法,需要的朋友可以参考下

项目场景：

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

问题描述

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

原因分析：

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

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

解决方案：

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

其实子组件是已经成功拿到数据了，只是渲染提前了导致无法成功渲染出来；那么我们这时可以使用vue3的watch来进行监听props所拿到的数据，之后在进行渲染

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

补充：

如果遇到watch:失效的问题以下操作可以解决

watch:{
            data:{  //监听的数据
                handler(val, oldName){
                     
                      console.log(val)
                  },
                  immediate:true, 
              },
        },

设置一个immediate为true就可以了

总结 

到此这篇关于vue3父组件异步props传值子组件接收不到值问题解决办法的文章就介绍到这了,更多相关vue3父组件异步props传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论