antdv vue。表单 自定义组件使用 v-decorator

antd vue 中，在 form 表单中的自定义组件使用 v-decorator
问题描述

项目需要，在表单中上传图片，所以要自己定以一个上传图片的组件，直接在 form 中使用，但是普通的自定义组件无法使用表单的 v-decorator。

分析

this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]"

经过 getFieldDecorator 或 v-decorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。
你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
你不应该用 v-model，可以使用 this.form.setFieldsValue 来动态改变表单值。
大概描述一下就是，一旦在 form 下使用了 v-decorator 之后，就不需要使用 v-model，其实实现上也有所相同，在自定义组件中需要自己定以 model 的东西，详细可以查阅官网。

简单说明

通俗来说，想使用 v-decorator，就必须要有个 value 想子组件传递数据。和一个 change 方法将子组件的数据变动告诉父组件，下面看部分代码

model: {
   
    prop: 'value',
    event: 'change'
  },
  
  props: {
   
    value: {
   
      type: String
      // 这个参数是v-decorator给子组件传值用的
      // 这里不要给默认值， 在form下使用会爆警告 Warning: SquareUpload `default value` can not collect,  please use `option.initialValue` to set default value.
    }
  }
   watch: {
   
    // 监听数据变化，及时提交给父组件
    fileList: {
   
      deep: true,
      immediate: true,
      handler: function (newV, oldV) {
   
      // 向父组件更新
        this.$emit('change', temp)
      }
    }
}

注意：value 不要给默认值，不然会爆警告default value can not collect, please use option.initialValue to set default value.

例子，封装一个上传图片的组件，在 form 中使用
子组件

<template>
    <div>

        <!-- one -->
        <div class="clearfix">
            <a-upload
                    name="upfile"
                    :action="apiUrl"
                    listType="picture-card"
                    :fileList="imageList"
                    :before-upload="beforeUpload"
                    @preview="handlePreview"
                    @change="imgChange"
            >
                <div v-if="imageList.length < maxListSize ">
                    <a-icon type="plus"/>
                    <div class="ant-upload-text">上传图片</div>
                </div>
            </a-upload>