解决vue中props对象中设置多个默认值的问题
更新时间：2024年04月09日 09:33:30 作者：songywaa
props中设置了默认值,但是获取时（获取父页面没有传的属性） 打印出来是undefined,所以本文给大家介绍了解决vue中props对象中设置多个默认值的问题,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
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中使用kindeditor富文本编辑器的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
我们经常在项目中会有支持pc与手机端需求,下面这篇文章主要给大家介绍了关于vue项目同时兼容pc和移动端的解决方式,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-10-10
关于IDEA中的.VUE文件报错 Export declarations are not supported by cu
这篇文章主要介绍了关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
这篇文章主要介绍了vue中动态添加style样式的几种写法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了使用 vue 实例更好的监听事件及vue实例的方法,介绍了一种新增 vue 实例的方法，单独监听事件，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
Vue路由钩子之afterEach beforeEach的区别详解
这篇文章主要介绍了Vue路由钩子 afterEach beforeEach区别 ,vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结。需要的朋友可以参考下2018-07-07
这篇文章主要介绍了mint-ui如何自定义messageBox样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了浅谈vue-props的default写不写有什么区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Vue3中SetUp函数的参数props、context详解
我们知道setup函数是组合API的核心入口函数,下面这篇文章主要给大家介绍了关于Vue3中SetUp函数的参数props、context的相关资料,需要的朋友可以参考下2021-07-07
这篇文章主要给大家介绍了关于如何通过shell脚本自动生成vue文件的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
最新评论