PrimeVue表单重置：如何用reset emit清除表单（Vue3组合式API）

核心思路 #

PrimeVue的Form组件内置了reset方法，只需获取组件实例引用，在重置按钮的点击事件中调用该方法即可清空表单字段；若需在重置时执行额外逻辑，还可监听组件的reset自定义事件。

完整示例（基于官方示例修改） #

<template>
  <div class="card">
    <Form ref="formRef" @reset="handleReset">
      <div class="flex flex-column gap-2">
        <InputText v-model="formData.name" placeholder="姓名" />
        <InputText v-model="formData.email" placeholder="邮箱" />
        <InputNumber v-model="formData.age" placeholder="年龄" />
        
        <div class="flex gap-2 mt-4">
          <Button label="提交" type="submit" @click="handleSubmit" />
          <Button label="重置" type="button" @click="resetForm" />
        </div>
      </div>
    </Form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Form, InputText, InputNumber, Button } from 'primevue';

// 表单数据
const formData = ref({
  name: '',
  email: '',
  age: null
});

// 获取Form组件引用
const formRef = ref(null);

// 提交逻辑
const handleSubmit = () => {
  console.log('提交数据:', formData.value);
};

// 重置表单
const resetForm = () => {
  formRef.value?.reset();
};

// 重置时的额外逻辑
const handleReset = () => {
  console.log('表单已完成重置');
};
</script>

关键说明 #

• 用ref()创建formRef绑定到Form组件，以此获取组件实例
• 重置按钮绑定resetForm函数，调用formRef.value.reset()即可触发表单字段清空，同时会触发组件的reset事件
• 表单字段重置后会回到formData的初始状态，若无需额外逻辑可省略@reset="handleReset"监听

内容的提问来源于stack exchange，提问作者jreeves