Vue3 emits-Eigenschaft

Vue3 选项式 APIVue3 Options API

In Vue3,emitsDie Eigenschaft wird verwendet, um die Ereignisse zu definieren, die eine Komponente auslösen kann.

emitsEs ist ein Array oder Objekt, das verwendet wird, um explizit zu deklarieren, welche benutzerdefinierten Ereignisse die Komponente auslösen wird.

DurchemitsDie Eigenschaft ermöglicht es Entwicklern, Komponentenereignisse besser zu verwalten und die Lesbarkeit und Wartbarkeit des Codes zu verbessern.

Warum die emits-Eigenschaft verwenden?

In Vue2 hört die Elternkomponentev-onauf Ereignisse der Kindkomponente, während die Kindkomponente$emitdie Methode verwendet, um Ereignisse auszulösen. Obwohl dieser Ansatz einfach und direkt ist, kann die Ereignisverwaltung mit wachsender Projektgröße chaotisch werden. Vue3 führtemitsdie Property ein, die folgende Vorteile bietet:

  1. Klare Ereignisdeklaration: Durchemitsdie Property können Entwickler klar erkennen, welche Ereignisse die Komponente auslösen wird.
  2. Codelesbarkeit: In der Komponente ermöglicht das Betrachtenemitsder Property ein schnelles Verständnis der Ereignisinteraktionen der Komponente.
  3. Typüberprüfung und Warnungen: Wenn das ausgelöste Ereignis nicht darin deklariertemitswird, gibt Vue im Entwicklungsmodus eine Warnung aus, die Entwicklern hilft, potenzielle Probleme zu entdecken.

Wie verwendet man die emits-Property?

1. Grundlegende Verwendung

In einer Komponente,emitses kann ein Array sein, das die Namen aller benutzerdefinierten Events auflistet.

Beispiel

<script>
export default {
  emits: ['update:modelValue', 'submit'],
  methods: {
    handleClick() {
      this.$emit('submit', 'Formular übermittelt!');
    }
  }
}
</script>

Im obigen Beispielemitsdas Array deklariertupdate:modelValueundsubmitzwei Events. Beim Aufrufenthis.$emit('submit', 'Form submitted!')es löst aussubmitEvent und übergibt Daten'Form submitted!'。

2. Objektverwendung

emitsEs kann auch ein Objekt sein, dessen Schlüssel Eventnamen und dessen Werte Validierungsfunktionen sind. Die Validierungsfunktion wird verwendet, um zu prüfen, ob die übergebenen Eventparameter gültig sind.

Beispiel

<script>
export default {
  emits: {
    submit: (payload) => {
      if (typeof payload === 'string') {
        return true;
      } else {
        console.warn('Die Nutzlast des Submit-Events muss ein String sein!');
        return false;
      }
    }
  },
  methods: {
    handleClick() {
      this.$emit('submit', 'Formular übermittelt!');
    }
  }
}
</script>

In diesem Beispiel,submitDie Validierungsfunktion für das Event prüftpayloadob es ein String ist. Wenn nicht, gibt sie eine Warnmeldung in der Konsole aus.

3. Kombiniert mit v-model

emitsDie Eigenschaft wird oft verwendetv-modelzusammen mit v-model, insbesondere bei der Behandlung der Zwei-Wege-Bindung in benutzerdefinierten Komponenten.

Beispiel

<template>
  <input :value="modelValue" @input="updateValue" />
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  methods: {
    updateValue(event) {
      this.$emit('update:modelValue', event.target.value);
    }
  }
}
</script>

In diesem Beispiel wird, wenn sich der Wert des Eingabefelds ändert, ausgelöstupdate:modelValueEreignis und übergibt den neuen Wert an die übergeordnete Komponente.

Vorsichtsmaßnahmen

  1. Groß-/Kleinschreibung bei Event-Namen: Bei Event-Namen wird in Vue nicht zwischen Groß- und Kleinschreibung unterschieden, aber es wird empfohlen, für die Benennung kebab-case (durch Bindestriche getrennt) zu verwenden.
  2. Rückgabewert der Validierungsfunktion: Wenn die Validierungsfunktionfalsefalse zurückgibt, gibt Vue im Entwicklungsmodus eine Warnung aus, aber das Event wird trotzdem ausgelöst.
  3. Standard-Events: Einige native Events (wie z. B.clickclick) müssen nichtemitsdeklariert werden, es sei denn, Sie müssen deren Parameter validieren.

Vue3 选项式 APIVue3 Options API

Andere Erweiterungen