如何检查来自子组件的输入是否 $invalid

Question

我需要验证来自子组件的输入是否有效。但我不知道如何从父亲组件中做到这一点。

我有一个包含多个字段及其验证的表单，为了简化，我将每个输入字段及其验证移到了他自己的组件中。但现在我需要一起验证它们。

我该怎么做？

我把live sample放到codesandbox上了：

https://codesandbox.io/embed/vuetify-playground-o7kbr?fontsize=14

Answer 1

引用输入

<input-cpf ref="input" label="CPF" :cpf.sync="cpf"/>

然后您可以从父级访问组件

this.$refs.input.$v.$touch();
if ( this.$refs.input.$v.cpf.$invalid ) {
    console.log('não esta pronto para enviar')
} else {
    console.log('pode enviar')
}