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();
}

validate函数附加到子级的实际输入，而不是子级组件本身。因此，第一个$refs[ref]将使您进入firstStep.vue这个组件，第二个$refs[ref]将您带到firstStep.vue中的内部输入。另外，在您的Codepen中，您在ref="firtStep"中错误拼写了firstStep.vue，因此无济于事。

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