如何将一个Vue组件中的所有字段与另一个组件一起验证（使用Vee-Validate？）>

Question

我使用Vue.js2.5.13+ Vee-Validate 2.0.3。我的代码结构是：

./ component-one.vue

：

<template>
  <div>

    <input type="text" name="input_one" id="input_one"
           v-model="input_one" 
           v-validate="'required'"
           :class="{'is-danger': errors.has('input_one')}" />

    <component-two></component-two>

    <button @click="submitForm">Submit!</button>

  </div>
</template>

<script>
  import Vue from 'vue'
  import VeeValidate from 'vee-validate'
  import ComponentTwo from './component-two.vue'

  Vue.use(VeeValidate, {
    events: 'input|blur'
  })

  export default {
    name: "component-one",
    components: {
      ComponentTwo
    },
    data() {
      return {
        input_one: '',
      }
    },
    methods: {
      submitForm: function () {
        // Validate before submit form
        this.$validator.validateAll().then((result) => {
          if (result) {
            alert('From Submitted!')
            return
          }
          alert('Correct them errors!')
        })
      }
    }
  }
</script>
./ component-two.vue

：

<template>
  <div>

    <input type="text" name="input_two" id="input_two"
           v-model="input_two" 
           v-validate="'required'"
           :class="{'is-danger': errors.has('input_two')}" />

  </div>
</template>

<script>
  export default {
    name: "component-two",
    data() {
      return {
        input_two: ''
      }
    }
  }
</script>
当我单击ComponentTwo中的button @click="submitForm"时如何从ComponentOne验证字段（用于在此组件上保存所有表单数据。

我有一个巨大的形式，由相似的小Vue组件（全部收集在ComponentOne中制成），非常适合在一处验证所有这些组件。

我使用Vue.js 2.5.13 + Vee-Validate 2.0.3。我的代码结构是：./component-one.vue：

Answer 1

您可以通过vue引用手动触发组件上的validateAll（），例如：

父组件