vue.js - Vuelidate:使用子组件验证表单

Question

如何使用 Vuelidate 对父组件内的嵌套组件进行验证？如果子组件中的输入有效或无效，我想更改 parentForm.$invalid。

家长:

<parent-component>
  </child-component-1>
  </child-component-2>
</parent-component>

validations: {
  parent: WHAT HERE?
}

child -1

<child-component-1>
  </some-input>
</child-component-1>

data() {
  return {
    someInput: ""
  };
},

validations: {
  someInput: required
}

child 2

<child-component-2>
  </some-input>
</child-component-2>

data() {
  return {
    someInput: ""
  };
},

validations: {
  someInput: required
}

Answer 1

我可能不是 Vue 专家。如果您已经在子组件中声明了验证并且您想要从父组件访问它，您可以使用这种方式从父组件引用子组件。

在父组件中它会像

<template>
<my-child ref="mychild"> </my-child>
</template>

您可以使用 $v 对象访问在 my-child 组件中声明的验证

this.$refs.mychild.$v

然后您就可以轻松地在父组件中使用子组件的验证。希望这将使工作比使用复杂的方法更容易，并且对我有用。