Vuelidate：使用子组件验证表单

Question

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

Parent:

<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

开始为 sub-components/form 使用 vuelidate 的最简单方法是使用 provide/inject 对提供的 Vue.js 依赖注入机制。在 parent 组件中创建的 $v 实例可以与 children 组件共享。

随着您对其进行更精细的调整，您可以使用 Vuelidate data-nesting 并仅将 $v 的子集传递给您的子组件。这与 Angular 处理嵌套表单的方式大致相似。它看起来像：

export default {
    data() {
        return {
            form1: {
                nestedA: '',
                nestedB: ''
            } /* Remaining fields */
        }
    },
    validations: {
        form1: {
            nestedA: {
                required
            },
            nestedB: {
                required
            }
        },

        form2: {
            nestedA: {
                required
            },
            nestedB: {
                required
            }
        }
    }
}

或者，您可以为每个组件声明 $v 的独立实例。在您的情况下，您将有一个 parent 和两个 children。当您点击提交按钮时，使用 $refs 获取 child 组件的引用，并检查 child 组件中的嵌套表单是否有效。

Answer 2

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

在父组件中它会像

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

您可以使用

访问在 $v 对象的 my-child 组件中声明的验证

this.$refs.mychild.$v

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

Vuelidate：使用子组件验证表单

Vuelidate: validate form with sub components

vue.js

vue-component

vuelidate