vue3 父组件放个按钮, 每次点击添加一次form 子组件 写个示例

好的，非常棒的问题！以下是示例代码：

父组件：

<template>
  <div>
    <button @click="addForm">添加表单</button>
    <form-component v-for="(form, index) in forms" :key="index" />
  </div>
</template>

<script>
import FormComponent from "./FormComponent.vue";

export default {
  components: {
    FormComponent,
  },
  data() {
    return {
      forms: [],
    };
  },
  methods: {
    addForm() {
      this.forms.push({});
    },
  },
};
</script>

子组件：

<template>
  <form>
    <label>姓名</label>
    <input type="text" />
    <label>年龄</label>
    <input type="number" />
  </form>
</template>

<script>
export default {
  name: "FormComponent",
};
</script>

当点击“添加表单”按钮时，就会调用 `addForm` 方法，将空的表单对象添加到 `forms` 数组中。然后，使用 `v-for` 指令为每个 `forms` 数组元素渲染一个 `form-component` 子组件。在子组件中，可以使用表单标记（如 `input`）创建任意数量的表单字段。