Vue.js 如何从vue中的父组件验证插槽中的表单？ 信息项组件 拯救 取消 如何使用InfoItemComponent

我想做的是，当我点击infoitemcomponent中的submit按钮时，我想通过vee validate验证输入元素。我怎样才能解决这个问题

当表单提交时，您必须在父组件中发出事件，并且在父组件中验证输入

InfoItemComponent:

<template>
  <form action="" @submit.prevent="formSubmit">
    <div class="account-container_right__infoInput">
      <!-- <input type="text"> -->
      <slot></slot>
    </div>
    <div class="account-container_right__infoButtons">
      <button type="submit" class="btn btn--primary">save</button>
      <button class="btn btn--default" @click.prevent="cancelEdit">cancel</button>
    </div>
  </form>
</template>
<script>
    export default {
    //other code..
    methods: {
      formSubmit() {
        this.$emit('formSubmited')
      }
    }
    //other code..
  }
</script>

拯救
取消
导出默认值{
//其他代码。。
方法：{
formSubmit（）{
此.$emit（'formSubmited'））
}
}
//其他代码。。
}

如何使用InfoItemComponent

<info-item @formSubmited="formSubmit">
  <input type="text" v-validate="'required'" >
</info-item>

<script>
 export default {
    //other code
  methods: {
    formSubmit() {
      //here validate your fields
    }
  }
   //other code
 }
</script>

导出默认值{
//其他代码
方法：{
formSubmit（）{
//这里验证您的字段
}
}
//其他代码
}

<template>
  <form action="" @submit.prevent="formSubmit">
    <div class="account-container_right__infoInput">
      <!-- <input type="text"> -->
      <slot></slot>
    </div>
    <div class="account-container_right__infoButtons">
      <button type="submit" class="btn btn--primary">save</button>
      <button class="btn btn--default" @click.prevent="cancelEdit">cancel</button>
    </div>
  </form>
</template>
<script>
    export default {
    //other code..
    methods: {
      formSubmit() {
        this.$emit('formSubmited')
      }
    }
    //other code..
  }
</script>

<info-item @formSubmited="formSubmit">
  <input type="text" v-validate="'required'" >
</info-item>

<script>
 export default {
    //other code
  methods: {
    formSubmit() {
      //here validate your fields
    }
  }
   //other code
 }
</script>