解决 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对象中设置多个默认值问题相关推荐

html5 循环加载图片,解决vue的 v-for 循环中图片加载路径问题
先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...
vue样式中背景图片路径_解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .welcome { width: 420px; height: ...
如何获取数组中嵌套对象中属性值不为空的对象？
如何获取数组中嵌套对象中属性值不为空的对象? 有一个对象数组如下: let arr = [ {id:1,aa:'aa1'}, {id:2,aa:'aa2',bb:{ cc:{dd:12} }}, {i ...
js中WINDOW对象中的location成员对象
js中DOM, DOCUMENT, BOM, WINDOW 区别全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象中的location成员对象 locatio ...
js中WINDOW对象中的navigator成员对象
js中DOM, DOCUMENT, BOM, WINDOW 区别全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象中的navigator成员对象 naviga ...
java mocked,JMockit 中被 Mocked 的对象属性及方法的默认值
前脚研究完 Mockito 中被 Mocked 的对象属性及方法的默认值, 虽然目今更多的是拥抱着 Mockito, 但总有时对 JMockit 也会挤眉弄眼,谁叫 JMockit 无所不能呢!被 M ...
DRF 中Request对象中获得数据
DRF 中response对象中获得数据 1.Request 1).data request.data 返回解析之后的请求体数据.类似于Django中标准的request.POST和 request. ...
python中的def函数括号里的默认值_Python中的默认参数值
Python对默认参数值的处理方法是少有的几个易使大多数新手Python程序员犯错的地方之一.(通常只犯一次) 导致困惑的地方是当你使用"可变"对象作为(参数的)默认值时的(程序) ...
java 设置默认list_java-如何设置ListPreferen的默认值
java-如何设置ListPreferen的默认值我需要在活动开始时为ListPreference设置默认值.我尝试使用ListPreference.setDefaultvalue("va ...

解决 vue中props对象中设置多个默认值问题

1、遇到问题：

子组件

父组件

2、原因：

3、解决方法：

子组件

解决 vue中props对象中设置多个默认值问题相关推荐

最新文章

热门文章