Vue.js Vuelidate：使用子组件验证表单

如何使用

Vuelidate

验证父组件中的嵌套组件？如果子组件中的输入有效或无效，我想更改父窗体。$invalid

家长：

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

validations: {
  parent: WHAT HERE?
}

验证：{
家长：这里是什么？
}

儿童-1

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

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

validations: {
  someInput: required
}

数据（）{
返回{
someInput:“
};
},
验证：{
someInput：必需
}

儿童-2

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

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

validations: {
  someInput: required
}

数据（）{
返回{
someInput:“
};
},
验证：{
someInput：必需
}

开始使用子组件/表单的vuelidate最简单的方法是使用

provide/injection

pair提供的Vue.js依赖项注入机制。父组件中创建的

$v

实例可以与子组件共享

当您对它进行更精细的调整时，您可以使用并且只将

$v

的子集传递给您的子组件。这与Angular处理嵌套表单的方式大致相似。它看起来像：

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

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

---

或者，您可以为每个组件声明

$v

的独立实例。在您的情况下，您将有一个家长和两个孩子。点击提交按钮时，使用

$refs

获取子组件的引用，并检查子组件中的嵌套表单是否有效。

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

在父组件中，它将类似于

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

---

然后，您可以如此轻松地在父组件中使用子组件的验证。希望这将使工作比使用复杂的方法容易得多，它对我很有效。

嗨！谢谢你的回答。我想为每个组件声明$v的独立实例。但是我想实现一种机制，在表单有效或无效时自动禁用/启用“提交”按钮。可能吗？在这里，当我传递$v的子集时，我看到一个问题。我需要传递$v的子集，但也需要传递data（）中表单的子集。否则，来自输入的数据不会传递到$model。我不能在子组件中使用子模型@HaHarshalPatil@Damaris，当您传递

$v

的子集时，您不应该将

v-model

绑定到组件道具，而应该将其直接绑定到

$v

模型，就像

$v.form1.firstName.$model

一样。您将获得模型中每个字段的副本。另外，当您有多个

$v

实例时，实际上无法直接执行此操作。您必须查询子组件，获取其Vuelidate实例并手动检查以禁用“提交”按钮。

this.$refs.mychild.$v