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

打印一下看结果:自动给补齐了父页面没有传的属性(下图)
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐