用vue3封装一个表单

好的，以下是一个简单的示例：

<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" :placeholder="field.placeholder" v-model="field.value">
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  name: 'MyForm',
  props: {
    fields: Array
  }
};
</script>

使用方法：

<template>
  <my-form :fields="fields" />
</template>

<script>
import MyForm from './MyForm.vue';

export default {
  name: 'App',
  components: {
    MyForm
  },
  data() {
    return {
      fields: [
        { label: '用户名', name: 'username', type: 'text', placeholder: '请输入用户名', value: '' },
        { label: '密码', name: 'password', type: 'password', placeholder: '请输入密码', value: '' }
      ]
    };
  }
};
</script>

在这个示例中，我们创建了一个名为 `MyForm` 的组件，它接收一个名为 `fields` 的数组作为属性。每个元素都表示表单中的一个字段，包括标签、名称、类型、占位符和当前值。渲染时，我们使用 `v-for` 循环遍历 `fields` 数组，为每个字段创建一个标签和输入框，并使用 `v-model` 指令将输入的值绑定到相应的字段。最后，我们添加了一个“提交”按钮，以便用户提交表单。