问题描述

子组件props属性中定义参数来接受父组件传值，但当父组件未对该参数传值时，可以通过default来定义默认参数值，但是在接收的参数为Object或Array类型时，需要通过Function来返回。这时候就有两种定义方式了。

// 方式1
() => {}

// 方式2
Function() { 
	return {}
}

但是使用方式1并没有达到预期效果，可以在mounted()生命周期打印值，发现默认值为undefied，但使用方式2功能正常。

组件简单介绍

Ant Design的表单控件<a-form-model-item>，在子组件使用其属性labelCol和wrapperCol来控制表头与表单的宽度，使其在一行内显示。它们接收的参数类型为Object，如{ span: 24 }。

子组件TestSelect

<a-form-model-item :label="placeholder" :label-col="labelCol" :wrapper-col="wrapperCol">
  <a-select
    allowClear
    v-bind="selectBind"
    @change="selectChange"
    :value="selectedValue?selectedValue:undefined"
    :getPopupContainer="triggerNode => triggerNode.parentNode"
  >
    <a-select-option v-for="item in list" :key="item.key" :value="item.code">{{item.name}}</a-select-option>
  </a-select>
</a-form-model-item>

<script>

export default {
  props: {
    placeholder: "",
    dictId: "",
    selectedValue: "",
    labelCol: {
      type: Object,
      // default: function(){ return { span: 6 } }
      default: () => { span: 6 }
    },
    wrapperCol: {
      // type: Function,
      default: function(){ return { span: 14 } }
      // default: { span: 14 }
    },
  },
  </script>

父组件

 <test-select
     placeholder="数据库"
     dictId="db_version"
 	 :selectedValue="form.dbVersion"
     @change="dvVersionChange"
></test-select>

解决办法

子组件中wrapperCol的default写法（方式2）