用vue封装一个form表单

好的，以下是一个简单的Vue组件实现的表单：

<template>
  <form>
    <div v-for="(field, index) in fields" :key="index">
      <label :for="field.name">{{ field.label }}</label>
      <input :type="field.type" :name="field.name" v-model="formData[field.name]" />
    </div>
    <button type="submit" @click.prevent="submitForm">提交</button>
  </form>
</template>

<script>
export default {
  name: "Form",
  props: {
    fields: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  data() {
    return {
      formData: {},
    };
  },
  methods: {
    submitForm() {
      // 提交表单逻辑
      console.log(this.formData);
    },
  },
};
</script>

在这个组件中，我们使用了一个 `fields` 数组作为 `props`，其中包含了表单中的每个字段的信息，如 `label` 、`name` 和 `type`。同时，我们使用 `v-for` 指令来动态渲染每个字段的标签和输入框，使用 `v-model` 实现了双向数据绑定。最后，我们添加了一个提交按钮，并在 `submitForm` 方法中处理表单提交的逻辑。