Wie verwende ich die Validierungsfunktion der untergeordneten Komponente in vue js 2, um Eingaben in der übergeordneten Komponente zu validieren?

Question

Ich versuche in meinem Vue-Projekt wiederverwendbare Komponenten zu erstellen. Dies ist Teil der Ausbildung, die ich erhalte. Aber ich glaube, mein Code braucht etwas Hilfe, das verwirrt mich.

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>

Ich kann ein Eingabefeld auf untergeordneter Ebene validieren und die zugehörigen Fehler in der Nähe des Eingabefelds anzeigen, wenn das Fokusereignis auftritt. Ich kann auch in der übergeordneten Komponente auf Name, Telefonnummer und E-Mail zugreifen. Aber wenn ich die Schaltfläche vom übergeordneten Element abschicke, kann ich die Felder nicht validieren. Da die Validierung auf der Unterebene erfolgt, gilt dies auch für die Fehler.

So überprüfen Sie die Verifizierung und stellen sicher, dass Name, Telefonnummer und E-Mail-Adresse gültig sind, nachdem Sie auf die Schaltfläche geklickt haben.

Aktualisiert Jedes Mal, wenn ein Benutzer falsche Daten in ein Eingabefeld eingibt, werden die Daten separat auf untergeordneter Ebene validiert. Aber ich habe keine Möglichkeit gefunden, denselben Inhalt in der übergeordneten Komponente zu finden. Weil die Datenvariablen meiner übergeordneten Komponente gleichzeitig mit der Eingabe aktualisiert werden.

Wie validiere ich auf übergeordneter Ebene, nachdem ich auf „Senden“ geklickt habe, ohne Anführungszeichen zu setzen und ohne andere Bibliotheken zu verwenden?

Answer 1

也许你需要的是ref来访问子组件，这里是官方文档：https://v2.vuejs.org/v2/api/#ref

对于所讨论的示例，引用用法是：