解决 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 就能直接用了

打印一下看结果：自动给补齐了父页面没有传的属性（下图）