vue中props中对象设置默认值不生效

1.遇到的问题

props设置了对象某属性的默认值，父组件没有传此属性，默认值不生效

data() {
    return {
      formParams: {
        btnWidth: 624,
        btnheight: 52
      },
    }
  },
复制代码

<pcReserveCrosswise
  formId="VForm-1630568098099"
  :formParams="formParams"
></pcReserveCrosswise>
复制代码

 props: {
    formParams: {
      type: Object,
      default: function() {
        return {
          btnWidth: 660,
          btnheight: 60,
          btnBackColor: '#432E30',
        }
      },
    },
},
复制代码

在子组件mounted钩子打印this.formParams，没有btnBackColor属性

2.原因

对象没有传时，用的是默认对象，但是对象某个属性不传时，不会自动补齐

3.解决方案

借助computed属性

computed: {
    params() {
      return Object.assign(
        {
          btnWidth: 660,
          btnheight: 60,
          btnBackColor: '#432E30',
        },
        this.formParams,
      )
    },
  },
复制代码

在mounted钩子打印this.params，有了btnBackColor属性值