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

Question

子组件props：

table:{
    type:Object,
    default: () => {
      return {
        url:'/list',
        field:'list'
      }
    }
  }

父组件的table数据：

table:{
    url:'/index'
}

此时在子组件中，只能获取到的table数据为{url:'/index'}，而field:'list'默认值却不见了。
请问，这是为什么的有什么解决解决办法没

Answer 1

你可能误解了props默认值的作用，它只在你没有传参时才会被读取，并不会为你的参数对象补齐属性，解决方式也是比较简单的，直接用计算属性

props: {
  table: {
    type: Object,
    default: () => {
      return {
        url: '/list',
        field: 'list',
      };
    },
  },
},
computed: {
  mTable() {
    return Object.assign({
      url: '/list',
      field: 'list',
    }, this.table);
  },
},

组件内读取mTable.field就能确保默认值存在了