vue2form组件二次封装

二次封装 Vue2Form 组件的步骤如下：

1. 创建一个新的 Vue 组件，命名为 MyForm。

2. 导入 Vue2Form 组件并注册为 MyForm 的子组件。

import Vue2Form from 'vue2form';
export default {
  components: {
    Vue2Form,
  },
}

3. 在 MyForm 组件中定义需要的 props 和 data。

props: {
  fields: {
    type: Array,
    required: true,
  },
},
data() {
  return {
    formData: {},
  };
},

4. 在 MyForm 组件中添加一个自定义方法 handleSubmit，用于处理表单提交事件。

methods: {
  handleSubmit() {
    console.log(this.formData);
    // 处理表单提交逻辑
  },
},

5. 在 MyForm 组件的模板中，使用 Vue2Form 组件并传入 props 和事件处理方法。

<template>
  <Vue2Form :fields="fields" v-model="formData" @submit="handleSubmit" />
</template>

最后，你就可以在其他组件中使用 MyForm 组件，并且只需要传入 fields 数据即可快速构建表单。例如：

<template>
  <MyForm :fields="myFields" />
</template>
<script>
import MyForm from './MyForm.vue';
export default {
  components: {
    MyForm,
  },
  data() {
    return {
      myFields: [
        { label: '姓名', name: 'name', type: 'text' },
        { label: '年龄', name: 'age', type: 'number' },
      ],
    };
  },
};
</script>

这样，你就可以轻松地使用封装后的表单组件，避免了重复编写类似的表单代码。