Typescript VeeValidate 4验证，无需提交按钮

我正试着把我的脑袋绕到VeeValidate 4上，但它与以前的版本大不相同，所以我遇到了很多问号和障碍。 我使用VUE3应用程序，使用composition API，在不同的组件/视图中使用两个表单。有一个“下一页”按钮，它可以带您进入下一个视图，但由于该按钮与表单完全分离，因此我没有任何可处理的提交连接到表单。相反，如果当前表单有效或无效，我希望将其保持在状态，这样可以确定是否允许用户进入下一页

我想完成的，但不确定是否可以，是在字段验证发生时能够“钩住”，这样，如果所有表单字段都有效或无效，就可以保存到状态。我已经看了很多次文档了，但是我想不出来。我将非常感谢任何形式的帮助、提示或想法

这是我的Vue组件/视图之一的简化版本：

<template>
    <form>
        <CustomInput v-model="name" inputType="text" name="name" />
        <div v-if="nameErrors.length">{{ nameErrors[0] }}</div>

        <CustomInput v-model="width" inputType="text" name="width" />
        <div v-if="widthErrors.length">{{ widthErrors[0] }}</div>
    </form>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useField } from 'vee-validate';
import CustomInput from 'CustomInput.vue';

export default defineComponent({
    name: 'View',
    components: {
        CustomInput,
    },
    setup() {
        const { value: name, errors: nameErrors } = useField('name', 'required');
        const { value: width, errors: widthErrors } = useField('width', 'required|numeric|boatWidth');

        return {
            name,
            width,
            nameErrors,
            widthErrors,
        };
    },
});
</script>

---

您应该使用

useForm

功能来访问表单状态。您可以使用

注入/提供

：

//在父组件中
常量{meta，errors}=useForm（）；
提供（'form_meta'，meta'）；
提供（“表格错误”，错误）；

然后，您可以在子组件中注入以下属性：

const formMeta=inject（'form_meta'）；
const formErrors=inject（'form_errors'）；

如果表单不在父表单中，这是如何工作的？我设法在我的表单所在的子组件中访问表单状态（如上面的示例所示）。这对我需要做的事情来说可能已经足够好了。我可以监视meta并跟踪我的表单是否有效，并将其保存到我的状态。这可能会更好，因为我的父组件在不同的组件中很可能有不同的形式。我很好奇如何使用提供和注入将childs formstate传递给父组件。我试过了，但是父元没有根据子组件中的表单进行更新。为了使父级具有最新的formstate，子级是否需要发出或类似信息？如果我的问题有道理的话。：）目前我不确定为什么需要表单状态向上而不是向下。我正在研究PR中的一些增强功能，但它同样关注从表单状态到子组件。对于家长，您可以使用

emit

或

$refs

。我的问题是，我的Vue应用程序（包含不同的步骤）有一个布局组件，显示其中包含表单的不同组件，但只有一个提交/下一步按钮。我已经用层次结构编辑了我的原始帖子。我在想解决这个问题的方法是知道Layout.vue中的子组件（父组件）的形式状态，然后告诉按钮相应地操作。但是我可能用了错误的方法。您可以使用

provide/inject

将数据发送回父级，这应该比事件更有效。这个问题也有类似的需要

LayoutComponent
    FormComponent (which component depends on what step the user is on)
    NextButtonComponent