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

【问题标题】：How to check if an input from child component it is $invalid如何检查来自子组件的输入是否为 $invalid
【发布时间】：2020-03-04 02:40:07
【问题描述】：

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

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

我该怎么做？

我将现场示例放在代码沙箱上：

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

【问题讨论】：

你可以让子组件报告它自己的状态
通过 $emit 之类的事件传递状态？但这会过度复制父组件中的每个变量吗？ @appleapple
我将它添加为（计算的）属性（在子节点上），然后使用类似this.child.every(c=>c.valid) 的东西（在父节点上）。或者，您可以根据需要将其添加为方法。

标签： vue.js vue-component vuetify.js vuelidate

【解决方案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')
}

【讨论】：

它有效。谢谢。