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 实现 tomato timer(蕃茄钟)实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了详解Vue开发微信H5微信分享签名失败问题解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
在项目开发中遇到这样需求，就是有几个tab栏，每个tab栏对应的ajax请求不一样，内容区域一样，内容为实时刷新数据，实现方法其实很简单的，下面小编给大家带来了基于Vue实现tab栏切换内容不断实时刷新数据功能，需要的朋友参考下吧2017-04-04
这篇文章主要介绍了如何在Vue项目中导出Excel，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家详细介绍了vue日期组件,支持vue1.0和2.0，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了vue数据变化但页面刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要给大家介绍了关于vue.js Router中嵌套路由的相关资料,所谓嵌套路由就是路由里面嵌套他的子路由,文章通过示例代码介绍的非常详细,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了详解Vue路由自动注入实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家详细介绍了Vue实现天气预报功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了Vue实现计算器计算效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最新评论