解决vue中props对象中设置多个默认值的问题
更新时间：2024年04月09日 09:33:30 作者：songywaa
props中设置了默认值,但是获取时（获取父页面没有传的属性） 打印出来是undefined,所以本文给大家介绍了解决vue中props对象中设置多个默认值的问题,需要的朋友可以参考下
1、遇到问题：
props中设置了默认值，但是获取时（获取父页面没有传的属性） 打印出来是undefined
子组件
props: {
paramsObj: {
type:Object,
default:() => {
return {
tabList: [],
tableFixedHeader: [],
showHandleCol:false,
handleType:[],
isTagData:false,
}
}
}
},
父组件
<RealViewModel :paramsObj="params"></RealViewModel>
params: {
type: "water",
tabList: [
{
name: "浓度数据",
id: "ND"
},
{
name: "水域水质分析",
id: "SY"
}
],
tableFixedHeader: [
{name:'时间',code:'DT',isFixed:true},
]
}
此时在子组件中，只能获取到父组件传过来的值，而没有传的属性没有了（下图）
2、原因：
props 默认值的作用：
它只在没有传参时才会被读取，并不会为你的参数对象补齐属性，
3、解决方法：
使用计算属性computed，解决 父页面不传参数情况
子组件
props: {
paramsObj: {
type:Object,
default:() => {
return {}
}
}
},
computed:{
params(){
return Object.assign({
tabList: [],
tableFixedHeader: [],
showHandleCol:false,
handleType:[],
isTagData:false,
},this.paramsObj);
}
},
页面中直接 params.isTagData 就能直接用了
打印一下看结果：自动给补齐了父页面没有传的属性（下图）
到此这篇关于解决vue中props对象中设置多个默认值的问题的文章就介绍到这了,更多相关vue props多个默认值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue去除#问题处理经过，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了VNode虚拟节点,结合实例形式分析了VNode虚拟节点的基本功能、原理与实现方法,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了安装vue无法运行、此系统无法运行脚本问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
今天小编就为大家分享一篇vuejs 制作背景淡入淡出切换动画的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了vue2.0父子组件间通信的实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-04-04
这篇文章主要介绍了Vue-Router的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue parseHTML函数源码解析之析器遇到结束标签的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
该文章主要介绍了在线日期计算器工具的开发过程,包括核心功能设计、实现细节、状态管理和日期处理技巧,工具提供了日期间隔计算、日期加减计算、年龄计算和工作日计算等功能,需要的朋友可以参考下2026-01-01
这篇文章主要介绍了vue直接打开public(本地)文件下的pdf文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在 Vue3 前端项目中,当用户在长列表 / 长内容页面滚动浏览后,切换到其他页面再返回,或刷新当前页面时,滚动条会默认回到顶部,体验较差,本文将分享一种基于 ref 引用 + 本地存储的方案,实现滚动位置的记忆与恢复,需要的朋友可以参考下2026-03-03
最新评论