Bagaimana untuk menggunakan fungsi pengesahan komponen anak dalam vue js 2 untuk mengesahkan input dalam komponen induk?

Question

Saya cuba mencipta komponen boleh guna semula dalam projek vue saya. Ini adalah sebahagian daripada latihan yang saya terima. Tetapi saya rasa kod saya memerlukan bantuan, ia mengelirukan saya.

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>

Saya dapat mengesahkan medan input pada peringkat kanak-kanak dan memaparkan ralat berkaitannya berhampiran medan input apabila peristiwa fokus berlaku. Saya juga boleh mengakses nama, telefon dan e-mel dalam komponen induk. Tetapi apabila saya menyerahkan butang daripada ibu bapa, saya tidak dapat mengesahkan medan. Memandangkan pengesahan dilakukan pada sub-peringkat, begitu juga ralat.

Cara menyemak pengesahan dan pastikan nama, telefon dan e-mel adalah sah selepas mengklik butang.

Dikemas kini Setiap kali pengguna memasukkan data yang salah dalam medan input, data itu disahkan secara berasingan pada peringkat kanak-kanak. Tetapi saya tidak menemui cara untuk mencari kandungan yang sama dalam komponen induk. Kerana pembolehubah data komponen induk saya dikemas kini pada masa yang sama dengan input.

Bagaimana untuk mengesahkan di peringkat ibu bapa selepas mengklik hantar tanpa memetik dan tanpa menggunakan perpustakaan lain?

Answer 1

Mungkin apa yang anda perlukan ialah refuntuk mengakses subkomponen, berikut ialah dokumentasi rasmi: https://v2.vuejs.org/v2/api/#ref

Untuk contoh yang dimaksudkan, penggunaan petikan ialah:

sssccc