如何在Ant Design Vue 2x中编写自定义表单组件？

<template>
  <a-form-item :label="label">
    <a-input v-model="value" :placeholder="placeholder" />
  </a-form-item>
</template>

<script>
import { AFormItem, AInput } from 'ant-design-vue';

export default {
  name: 'CustomFormInput',
  components: {
    AFormItem,
    AInput,
  },
  props: {
    label: {
      type: String,
      required: true,
    },
    value: {
      type: [String, Number],
      required: true,
    },
    placeholder: {
      type: String,
      default: '',
    },
  },
};
</script>

<template>
  <a-form :form="form" @submit="handleSubmit">
    <custom-form-input label="Username" v-model="formData.username" />
    <custom-form-input label="Password" v-model="formData.password" />
    <a-form-item>
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import CustomFormInput from './CustomFormInput.vue';
import { AForm, AFormItem, AButton } from 'ant-design-vue';

export default {
  name: 'ParentComponent',
  components: {
    CustomFormInput,
    AForm,
    AFormItem,
    AButton,
  },
  data() {
    return {
      form: {},
      formData: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          // 处理表单提交逻辑
        }
      });
    },
  },
};
</script>