antdvue中form二次封装

在 antdvue 中，Form 二次封装可以让我们更加方便地使用 Form 组件，并且能够提高代码的复用性和可维护性。以下是一个简单的 Form 二次封装的示例：

<template>
  <a-form :form="form">
    <slot></slot>
    <a-form-item>
      <a-button type="primary" @click="handleSubmit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { defineComponent } from 'vue';
import { Form, Button } from 'ant-design-vue';

export default defineComponent({
  components: {
    AForm: Form,
    AFormItem: Form.Item,
    AButton: Button,
  },
  props: {
    initialValues: {
      type: Object,
      default: () => ({}),
    },
  },
  emits: ['submit'],
  setup(props, { emit }) {
    const form = Form.useForm()[0];

    const handleSubmit = () => {
      form.validateFields().then(values => {
        emit('submit', values);
      });
    };

    return {
      form,
      handleSubmit,
    };
  },
});
</script>

在这个示例中，我们通过使用插槽来接收 Form.Item 组件，然后在组件内部使用了 antdvue 的 Form、Form.Item 和 Button 组件。我们还通过 props 来接收初始值，并且通过 emits 来触发 submit 事件。在 setup 函数中，我们使用了 antdvue 的 useForm 方法来获取 form 实例，并且实现了 handleSubmit 方法来提交表单。这样，我们就可以在父组件中使用这个二次封装的 Form 组件了，例如：

<template>
  <my-form @submit="handleSubmit">
    <my-input v-model="form.name" label="姓名" />
    <my-input v-model="form.age" label="年龄" />
  </my-form>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import MyForm from './MyForm.vue';
import MyInput from './MyInput.vue';

export default defineComponent({
  components: {
    MyForm,
    MyInput,
  },
  setup() {
    const form = reactive({
      name: '',
      age: '',
    });

    const handleSubmit = values => {
      console.log(values); // { name: '', age: '' }
    };

    return {
      form,
      handleSubmit,
    };
  },
});
</script>

在这个示例中，我们使用了 MyForm 和 MyInput 组件来实现表单的渲染，并且在父组件中通过 v-model 来实现双向数据绑定。当用户提交表单时，我们会触发 handleSubmit 方法并且打印出表单的值。