vue.js - 如何从vue中的父组件验证插槽中的表单？

Question

信息项组件

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

我如何使用 InfoItemComponent

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

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

Answer 1

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

信息项组件：

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

如何使用 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>