vee-validate - 从父组件验证子组件

Question

我正在使用vee-validate 3.x 我想从父组件验证子组件中包含的表单。

家长

<form-wizard>
<tab-content :before-change="() => validateStep('firstStep')">
  <first-step ref="firstStep"></first-step>
</tab-content>
<tab-content>Step 2</tab-content>

孩子（第一步）

<div>
    <ValidationProvider rules="required" ref="firstStep" v-slot="{ errors }">
      <input v-model="value" type="text" />
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </div>

这是该问题的最小代码复制

https://codesandbox.io/s/vue-template-m17sn

执行 validateStep 时出现此错误

[Vue 警告]：v-on 处理程序中的错误：“TypeError：this.$refs[ref].validate 不是函数”

问题

我感觉这个问题与ref 有关，我一直在寻找解决方案。

Answer 1

您的父验证函数如下所示：

validateStep(ref) {
  return this.$refs[ref].validate();
}

如果它看起来像这样就可以了：

validateStep(ref) {
  return this.$refs[ref].$refs[ref].validate();
}

验证函数附加到子组件的实际输入，而不是子组件本身。所以第一个$refs[ref] 将您带到firstStep.vue，组件，第二个$refs[ref] 将您带到firstStep.vue 的内部输入。此外，在您的 codepen 中，您在 firstStep.vue 中拼错了 ref="firtStep"，所以这没有帮助。

我觉得让firstStep 表单验证跟踪它自己的状态并在表单处于有效状态时发出一个事件会更好。这样，如果表单中有 10 个字段，则父级不需要知道它们的任何信息，只需知道它们是否有效。