vue3中 setup()中 引入两个form

在 Vue3 中，可以使用 `reactive` 函数和 `ref` 函数来创建响应式数据。在 `setup()` 函数中，可以将这些数据作为返回值暴露给模板使用。下面是一个示例，演示如何在 `setup()` 函数中引入两个表单：

<template>
  <div>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="form1.name">
    </form>
    <form>
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="form2.email">
    </form>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const form1 = reactive({
      name: '',
    });

    const form2 = reactive({
      email: '',
    });

    return {
      form1,
      form2,
    };
  },
};
</script>

在上面的示例中，我们使用 `reactive` 函数创建了两个表单数据 `form1` 和 `form2`，并将它们作为返回值暴露给模板使用。在模板中，我们可以使用 `v-model` 指令将表单数据和表单控件绑定在一起，从而实现双向绑定。