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

回答：对于这个问题，我可以给出以下的建议：

1. 在父组件中，定义一个数组用于存储 form 子组件的信息。
2. 在父组件中，定义一个 addForm 方法，每次点击按钮时，该方法向数组中添加一个新的 form 子组件信息。
3. 在父组件中，使用 v-for 指令循环渲染出所有的 form 子组件，并将存储在数组中的信息传递给每个 form 子组件。
4. 在 form 子组件中，通过 props 接收并使用父组件传递过来的信息。

这样，每次点击按钮时，都会向数组中添加一个新的 form 子组件并将其渲染出来。同时，父组件和子组件之间通过 props 传递信息，保证了组件之间的数据通信。

相关问题

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`）创建任意数量的表单字段。

vue3父组件调用子组件的form校验

在Vue 3中，可以使用`$refs`来引用子组件，并且调用子组件的方法进行校验。下面是一个示例：

在父组件中，首先给子组件添加一个`ref`属性：

<template>
  <div>
    <ChildComponent ref="childRef"></ChildComponent>
    <button @click="validateForm">校验表单</button>
  </div>
</template>

然后，在父组件的方法中使用`$refs`引用子组件，并调用子组件的校验方法：

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    validateForm() {
      this.$refs.childRef.validateForm();
    }
  }
}
</script>

接下来，在子组件中定义一个校验方法：

<template>
  <div>
    <input v-model="name" type="text" placeholder="请输入姓名">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    }
  },
  methods: {
    validateForm() {
      // 进行表单校验逻辑
      if (!this.name) {
        alert('姓名不能为空');
      } else {
        alert('校验通过');
      }
    }
  }
}
</script>

现在，当点击父组件中的按钮时，会调用子组件的`validateForm`方法进行表单校验。

需要注意的是，使用`$refs`引用子组件时，需要保证子组件已经被渲染到页面上才能有效。