解决 vue中props对象中设置多个默认值问题
1、遇到问题:props中设置了默认值,但是获取时(获取父页面没有传的属性) 打印出来是undefined子组件props: {paramsObj: {type:Object,default:() => {return {tabList: [],tableFixedHeader: [],showHandleCol:false,
·
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
就能直接用了
打印一下看结果:自动给补齐了父页面没有传的属性(下图)
更多推荐
已为社区贡献9条内容
所有评论(0)