写一段代码 vue3表单提交完后重制表单

### 回答1：
在 Vue 3 中，可以使用 `ref` 函数来创建一个响应式的变量，然后在表单提交成功后，将表单数据重置为初始值。

下面是示例代码：

<template>
  <form @submit.prevent="submitForm">
    <label>
      Name:
      <input type="text" v-model="name" />
    </label>
    <button type="submit">Submit</button>
  </form>
</template>

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

export default {
  setup() {
    const name = ref('');

    function submitForm() {
      // 在这里提交表单，可以使用 Axios 或 Fetch 等库
      // 表单提交成功后，重置表单数据
      name.value = '';
    }

    return {
      name,
      submitForm,
    };
  },
};
</script>

在上面的代码中，我们使用了 `ref` 函数创建了一个名为 `name` 的响应式变量。当用户在表单中输入内容时，`name` 的值会随之改变。

在 `submitForm` 函数中，我们可以使用 Axios 或 Fetch 等库来提交表单。在表单提交成功后，我们将 `name` 的值重置为一个空字符串，以实现重置表单的效果。

### 回答2：
在Vue 3中，我们可以使用`ref`来创建一个变量来保存表单数据，并通过`reset()`方法来重置表单。下面是实现这一功能的代码示例：

<template>
  <form @submit.prevent="submitForm">
    <label for="name">姓名:</label>
    <input type="text" id="name" v-model="formData.name" required>
    
    <label for="email">邮箱:</label>
    <input type="email" id="email" v-model="formData.email" required>
    
    <button type="submit">提交</button>
  </form>
</template>

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

export default {
  setup() {
    // 创建ref变量保存表单数据
    const formData = ref({
      name: '',
      email: ''
    });

    // 表单提交处理函数
    const submitForm = () => {
      // 提交表单逻辑处理...

      // 重置表单
      formData.value = {
        name: '',
        email: ''
      };
    };

    return {
      formData,
      submitForm
    };
  }
}
</script>

在上面的代码中，我们使用`ref`创建了一个名为`formData`的变量来保存表单数据。在表单提交处理函数 `submitForm`中，我们通过将`formData.value`重置为空对象`{ name: '', email: '' }`来实现表单的重置。这样，在表单提交后，输入框中的值将会被清空，重置为初始值。

### 回答3：
在Vue3中，可以使用`ref`和`reset`方法来重置表单。下面是一个示例代码：

<template>
  <form ref="myForm" @submit="submitForm">
    <label for="name">姓名:</label>
    <input id="name" type="text" v-model="name">
    
    <label for="email">邮箱:</label>
    <input id="email" type="email" v-model="email">
    
    <button type="submit">提交</button>
  </form>
</template>

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

export default {
  setup() {
    const name = ref('');
    const email = ref('');
    const myForm = ref(null);

    const submitForm = () => {
      // 提交表单的逻辑，可以在这里处理表单数据

      // 重置表单
      myForm.value.reset();

      // 或者手动重置表单字段值
      // name.value = '';
      // email.value = '';
    };

    return {
      name,
      email,
      submitForm
    };
  }
}
</script>

在上述代码中，我们使用`ref`创建了一个名为`myForm`的引用，然后将其绑定到`form`元素上，以便在`submitForm`方法中使用。当表单被提交时，我们可以通过调用`reset`方法来重置表单。如果你更倾向于手动重置表单字段的值，你可以将其值设置为null或空字符串。由于Vue3使用了Composition API，你可以使用`setup`方法来定义和导出所需的属性和方法。