Vue Antdv a-form 表单中使用自定义组件，并支持 v-decorator 效验

<template>
  <!-- 包装一个 input，让它支持数据双向绑定 v-model，同时也支持 form 表单的效验 -->
  <div class="custom-input">
    <!-- 使用一个输入框 -->
    <a-input
      :placeholder="placeholder"
      v-model="valuePro"
      @change="inputChange"
    />
  </div>
</template>
<script>
export default {
  // a-form 表单会监听下面事件与值，到时候需要通过 change 事件传出新的值即可，v-decorator 会通过 change 事件接受新值
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    // 当前组件值
    // 默认是给 v-model 绑定值使用的
    value: {
      type: String
      // 当通过 a-from 标签包裹时：
      // 这个参数是 v-decorator 给子组件传值用的
      // 这里不要给默认值， 在 form 下使用会爆警告 Warning: SquareUpload `default value` can not collect,  please use `option.initialValue` to set default value.
    },
    // 占位符
    placeholder: {
      type: String,
      default: () => undefined
    }
  },
  computed: {
    // 支持 v-model 双向数据绑定，如果有新数据会通过 $emit 一个 input 事件进行修改 v-model 的值，也就是当前 value 值。
    // 写法是固定的，vue 自动处理，只管通过 $emit('input', newValue) 抛出去新的值即可。
    currentValue: {
      get () {
        return this.value
      },
      set (newValue) {
        this.$emit('input', newValue)
      }
    }
  },
  watch: {
    // 监听当前值变化，及时提交给父组件
    currentValue: {
      deep: true,
      immediate: true,
      handler: function (newValue) {
        // 记录最新的值
        this.valuePro = newValue
        // 判断当前的 value 值是否为 undefined， 如果是的话不用抛出去，要不然 form 标签就会走效验，并提示对应的错误了
        if (newValue !== undefined) {
          // v-decorator 会通过 change 事件接受新值
          this.$emit('change', newValue)
        }
      }
    }
  },
  data () {
    return {
      // 当前页面值，用于做桥梁使用的
      // 当前页面操作修改的就是这个值，外部传进来也会更新这个值，它变化了在通过 input change 去更新外部的值
      valuePro: undefined
    }
  },
  methods: {
    // input 输入
    inputChange (e) {
      // 传出去最新值，这里只需要通过 change 事件传出去即可，内部的 value 也会发生变化
      this.$emit('change', e.target.value)
    }
  }
}
</script>

<template>
  <!-- form -->
  <a-form
    :form="form"
    :label-col="{ span: 3 }"
    :wrapper-col="{ span: 5 }"
    @submit="handleSubmit"
  >
    <!-- 原生组件 -->
    <a-form-item label="原生组件">
      <a-input
        placeholder="请输入名称"
        v-decorator="['name', { rules: [{ required: true, message: '请输入名称!' }] }]"
      />
    </a-form-item>
    <!-- 自定义组件 -->
    <a-form-item label="自定义组件">
      <custom-input
        placeholder="请输入简介"
        v-decorator="['info', { rules: [{ required: true, message: '请输入名称!' }] }]"
      />
    </a-form-item>
    <!-- 提交按钮 -->
    <a-form-item label="提交按钮">
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import CustomInput from './CustomInput'
export default {
  components: {
    CustomInput
  },
  data () {
    return {
      // 创建一个 Form 对象
      form: this.$form.createForm(this)
    }
  },
  methods: {
    // 提交按钮
    handleSubmit(e) {
      e.preventDefault()
      // 效验数据
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Form表单数据效验成功：', values)
        }
      })
    }
  }
}
</script>