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>

Child（firstStep）

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