19

如何使用父组件内的嵌套组件验证Vuelidate？我想更改parentForm.$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
}

孩子 2

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

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

validations: {
  someInput: required
}
4

2 回答 2

22

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

在父组件中就像

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

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

this.$refs.mychild.$v

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

于 2019-11-25T04:42:05.113 回答
5

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

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

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

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

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

于 2019-01-24T10:21:24.617 回答