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

我使用Vue.js

2.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>

<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>

提交
从“Vue”导入Vue
从“vee validate”导入vee validate
从“./component two.vue”导入组件二
Vue.使用（VeeValidate{
事件：“输入|模糊”
})
导出默认值{
名称：“第一部分”，
组成部分：{
成分二
},
数据（）{
返回{
输入一个：“”，
}
},
方法：{
submitForm:function（）{
//提交表格前验证
这是。$validator.validateAll（）。然后（（结果）=>{
如果（结果）{
警报（'来自已提交！'）
返回
}
警报（“纠正错误！”）
})
}
}
}

/component two.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>

<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>

导出默认值{
名称：“第二部分”，
数据（）{
返回{
输入两个：“”
}
}
}

当我单击

ComponentOne

中的

按钮@click=“submitForm”

时，如何验证

ComponentTwo

中的字段（用于保存此组件中的所有表单数据）

---

我有一个巨大的表单，由类似的小型Vue组件（都收集在

ComponentOne

中）生成，如果能在一个地方验证所有这些组件，那将非常棒。

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

父组件

<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 ref="validateMe"></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: async function () {
        // Validate before submit form
        const result = await this.$validator.validateAll() && await this.$refs.validateMe.$validator.validateAll()
        if (result) {
          alert('From Submitted!')
          return
        }
        alert('Correct them errors!')
      }
    }
  }
</script>

提交
从“Vue”导入Vue
从“vee validate”导入vee validate
从“./component two.vue”导入组件二
Vue.使用（VeeValidate{
事件：“输入|模糊”
})
导出默认值{
名称：“第一部分”，
组成部分：{
成分二
},
数据（）{
返回{
输入一个：“”，
}
},
方法：{
submitForm:异步函数（）{
//提交表格前验证
const result=wait this.$validator.validateAll（）&&wait this.$refs.validateMe.$validator.validateAll（）
如果（结果）{
警报（'来自已提交！'）
返回
}
警报（“纠正错误！”）
}
}
}

我们应该将此答案标记为正确答案。如果不使用vee validate，您可以在父组件中使用“this.$refs[“form”].validate（）来验证子组件中的任何表单。将我保存在这里，谢谢！