Comment utiliser la fonction de validation du composant enfant dans vue js 2 pour valider l'entrée dans le composant parent ?

Question

J'essaie de créer des composants réutilisables dans mon projet vue. Cela fait partie de la formation que je reçois. Mais je pense que mon code a besoin d'aide, ça me rend confus.

let validations = {}

validations.firstName = function(e, that) {
  if (e.target.value == "") that.errors = {
    [that.labelID]: 'Please enter your first name'
  }
  else return true
  that.input_error = !that.input_error
}

validations.phone = function(e, that) {
  if (e.target.value == "") that.errors = {
    [that.labelID]: 'Please enter phone number'
  }
  else if (e.target.value.length > 10) that.errors = {
    [that.labelID]: 'Phone number should be 10 digits only'
  }
  else return true
  that.input_error = !that.input_error
}

validations.email = function(e, that) {
  if (e.target.value == "") that.errors = {
    [that.labelID]: 'Please enter email'
  }
  else return true
  that.input_error = !that.input_error
}

Vue.component('childInput', {
  template: '#my-child-input',
  data() {
    return {
      errors: {},
      input_error: false
    }
  },
  props: {
    labelID: String,
    label: String,
    inputType: {
      type: String,
      default: 'text'
    },
    value: {
      type: [String, Boolean, Number],
      default: null
    },
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value)
    },
    handleFocusIn(e) {
      this.errors = {[this.labelID]: ''}
      if (this.input_error) this.input_error = !this.input_error
    },
    handleFocusOut(e) {
      switch (this.labelID) {
        case 'firstName':
        case 'phone':
        case 'email':
          validations[this.labelID](e, this)
          break;
        default:
          console.log('in default last name')
          break;
      }
    }
  }
});

new Vue({
  el: '#app',
  data() {
    return {
      event: {
        firstName: '',
        phone: '',
        email: ''
      }
    };
  },
  methods: {
    handleSubmit(e) {
      // I can access firstName, phone and email. 
      // But how to access the validation functions written in child component
      console.log('All data: ', this.event)
    }
  }
})

.someStyleClass {
  margin-bottom: 20px;
}

.input_error {
  border-color: red !important;
  color: red;
}

.labelStyle {
  display: block;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<!-- Parent Component -->
<div id="app">
  <div class="someStyleClass">
    <child-input v-model="event.firstName" label="First Name" label-i-d="firstName" />
  </div>
  <div class="someStyleClass">
    <child-input v-model="event.phone" label="Phone" label-i-d="phone" />
  </div>
  <div class="someStyleClass">
    <child-input v-model="event.email" label="* Email" label-i-d="email" input-type="email" />
  </div>

  <button type="submit" v-on:click="handleSubmit">Validate & Submit</button>

</div>


<!-- Child Component -->
<template id="my-child-input">
  <div>
    <label class="labelStyle" :class="{input_error}">{{ label }}</label>
    <input :class="{input_error}" :value="value" :type="[inputType]" v-on:input="handleInput" v-on:focusout="handleFocusOut" v-on:focusin="handleFocusIn"/>
    <div v-if="errors[labelID]" :class="{input_error}">{{errors[labelID]}}</div>
  </div>
</template>

Je suis capable de valider un champ de saisie au niveau enfant et d'afficher ses erreurs associées à proximité du champ de saisie lorsque l'événement focus se produit. Je peux également accéder au nom, au téléphone et à l'e-mail dans le composant parent. Mais lorsque je soumets le bouton du parent, je ne peux pas valider les champs. Puisque la validation se fait au sous-niveau, les erreurs le sont aussi.

Comment vérifier la vérification et vous assurer que le nom, le téléphone et l'e-mail sont valides après avoir cliqué sur le bouton.

Mise à jour Chaque fois qu'un utilisateur saisit des données incorrectes dans un champ de saisie, les données sont validées séparément au niveau enfant. Mais je n'ai pas trouvé le moyen de retrouver le même contenu dans le composant parent. Parce que les variables de données de mon composant parent sont mises à jour en même temps que l'entrée.

Comment valider au niveau parent après avoir cliqué sur soumettre sans citer et sans utiliser d'autres bibliothèques ?

Answer 1

Peut-être que ce dont vous avez besoin est refpour accéder aux sous-composants, voici la documentation officielle : https://v2.vuejs.org/v2/api/#ref

Pour l'exemple en question, l'utilisation de la citation est :

sssccc