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传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近遇到了需求,觉着有必要给大家总结下,这篇文章主要给大家介绍了关于一次在vue中使用post进行excel表下载的实战记录,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
Openlayers 是一个模块化、高性能并且功能丰富的WebGIS客户端的JavaScript包，用于显示地图及空间数据，并与之进行交互，具有灵活的扩展机制，本文给大家介绍vue+openlayer实现地图聚合效果和撒点效果，感兴趣的朋友一起看看吧2021-09-09
雷达图是一种可视化数据的方式,用于比较多个类别中不同指标的相对值,它适用于需要展示多个指标之间的关系和差异的场景,本文给大家介绍了如何用Vue3轻松创建交互式雷达图,需要的朋友可以参考下2024-06-06
前段时间一直在学习vue,开始记录一下遇到的问题,下面这篇文章主要给大家介绍了关于vue项目中less的一些使用小技巧,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-09-09
这篇文章主要为大家详细介绍了Vue2.0实现自适应分辨率，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
在Vue Element前端应用中，图标是必不可少点缀界面的元素，Element界面组件里面提供了很多常见的图标，因此考虑扩展更多图标，引入了vue-awesome组件，它利用了Font Awesome的内置图标，实现了更多图标的整合，可以在项目中使用更多的图标元素了2021-05-05
这篇文章主要介绍了vue-cli中实现响应式布局的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了vue beforeRouteEnter 死循环的问题,在文章末尾给大家补充介绍了vue中beforeRouteEnter使用的误区，需要的朋友可以参考下2019-04-04
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
这篇文章主要介绍了浅谈vue使用axios的回调函数中this不指向vue实例,为undefined，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输。重点给大家介绍vue中的$emit 与$on父子组件与兄弟组件的之间通信方式，感兴趣的朋友一起看看2018-05-05
最新评论