如何在PrimeVue表单外部引用表单状态？

我刚好之前也碰到过类似的需求，PrimeVue的Form组件其实支持通过ref来引用整个表单实例，这样你就能在组件的任意地方（包括computed属性、外部方法里）轻松访问表单的所有状态了，不管是整体的dirty/valid状态，还是单个字段的错误信息都能拿到。

具体做法很简单，分几步来：

1. 给Form组件添加ref属性 #

先在你的Form标签上加上一个ref标识，这样Vue就能帮我们拿到这个组件的实例：

<Form
  ref="formRef"
  v-slot="form"
  :initialValues="location"
  :resolver
  @submit="formSubmit"
  class="h-full flex flex-col justify-between"
>
  <!-- 你原来的表单内容保持不变 -->
</Form>

2. 在script中定义对应的ref变量 #

在组件的script部分，用Vue的ref函数定义一个和上面名字对应的变量：

import { ref, computed } from 'vue';

// 定义用于引用表单的ref
const formRef = ref(null);

3. 在外部访问表单状态 #

现在你就可以在computed属性、任意方法里直接通过formRef.value来访问表单的所有状态了：

比如创建一个computed属性来判断表单是否dirty：

const isFormDirty = computed(() => {
  // 先判断表单实例是否已挂载，避免报错
  if (!formRef.value) return false;
  // 遍历所有字段，只要有一个字段被修改过，就返回true
  return Object.values(formRef.value).some(field => field?.dirty === true);
});

甚至你的discard函数也可以不用再手动传form参数了，直接用ref获取状态：

const discard = async () => {
  if (!formRef.value) return;
  const isDirty = Object.values(formRef.value).some(field => field?.dirty === true);
  console.log("Dirty", isDirty);
};

需要注意的是，formRef.value和你在v-slot里拿到的form对象是同一个实例，所以结构完全一致——你可以像在模板里访问form.name.invalid那样，在外部用formRef.value?.name?.invalid来检查单个字段的状态，错误信息也能通过formRef.value?.name?.error?.message获取到。

备注：内容来源于stack exchange，提问作者user19343904