So geben Sie Ereignisse aus, um zwischen Vue-Komponenten zu kommunizieren

Durch die Strukturierung Ihrer Webanwendungen mithilfe einer Komponentenarchitektur können Sie Ihre Anwendung einfacher erstellen und verwalten.

Das Ausgeben benutzerdefinierter Ereignisse ist eine Möglichkeit, die Kommunikation zwischen Komponenten zu verwalten. Requisiten und Slots sind zwei weitere. Mit benutzerdefinierten Ereignissen können Sie Daten von der untergeordneten an die übergeordnete Komponente senden.

Senden Sie Ereignisse von einem untergeordneten Element an sein übergeordnetes Element

Vue bietet viele Optionen zur Kommunikation zwischen Komponenten. Eine wichtige Möglichkeit Die Kommunikation zwischen Komponenten erfolgt über Requisiten. Mit Requisiten können Sie Daten von übergeordneten an untergeordnete Komponenten senden.

Was passiert dann, wenn Sie Daten von der untergeordneten an die übergeordnete Komponente senden möchten? Mit Vue können Sie benutzerdefinierte Ereignisse von untergeordneten an übergeordnete Komponenten senden. Dieser Prozess ermöglicht es der übergeordneten Komponente, Daten und Funktionen der untergeordneten Komponente zu verwenden.

Stellen Sie sich zum Beispiel eine Schaltflächenkomponente mit einer Funktion vor, die bei jedem Klick einen Wert zurückgibt. Sie müssen dieses Ereignis an die übergeordnete Komponente senden, damit die übergeordnete Komponente ihren Status aktualisieren oder eine Aktion basierend auf dem zurückgegebenen Wert ausführen kann.

Namenskonvention für benutzerdefinierte ausgegebene Ereignisse in Vue

Bevor Sie sich mit der Ausgabe benutzerdefinierter Ereignisse befassen, müssen Sie die Namenskonvention für benutzerdefinierte Ereignisse in Vue verstehen. Bevor Vue 3 auf den Markt kam, mussten Entwickler ausschließlich benutzerdefinierte Ereignisse definieren Dönerkoffer, wobei Wörter in Namen durch einen Bindestrich getrennt werden.

Bei der Arbeit mit HTML-Vorlagen ist es mittlerweile gängige Praxis, Ihre benutzerdefinierten Ereignisse in Kebab-Case zu definieren CamelCase beim Arbeiten mit JavaScript. Bei der Arbeit mit JavaScript können Sie jedoch jede beliebige Option verwenden, da Vue alle benutzerdefinierten Ereignisse wieder in kebab-case kompiliert.

Wenn Sie ein benutzerdefiniertes Ereignis ausgeben, geben Sie den Zweck des Ereignisses mit einem aussagekräftigen Namen an. Dies ist insbesondere bei Teamarbeit sehr wichtig, um den Zweck der Veranstaltung deutlich zu machen.

So geben Sie benutzerdefinierte Ereignisse von der untergeordneten zur übergeordneten Komponente aus

Es gibt zwei Möglichkeiten, wie Sie in Vue benutzerdefinierte Ereignisse aussenden können. Sie können benutzerdefinierte Ereignisse inline (direkt in der Vue-Vorlage) mit ausgeben $emittieren Methode, die Vue bereitstellt. Sie können auch davon Gebrauch machen defineEmits Makro verfügbar ab Vue 3.

Ausgeben benutzerdefinierter Ereignisse in Vue mit der $emit-Methode

$emittieren, eine integrierte Vue-Methode, ermöglicht es einer untergeordneten Komponente, ein Ereignis an ihre übergeordnete Komponente zu senden. Sie rufen diese Methode inline (innerhalb der Vorlage der untergeordneten Komponente) auf, um das benutzerdefinierte Ereignis auszulösen. Die Methode $emit benötigt zwei Argumente: den Namen des Ereignisses, das Sie ausgeben möchten, und eine optionale Nutzlast, die zusätzliche Daten enthalten kann.

Betrachten Sie diese untergeordnete Komponente, die ein Ereignis ausgibt, um die übergeordnete Komponente über einen Klick auf eine Schaltfläche zu benachrichtigen:

 ChildComponent.vue 
<Skriptaufstellen>
import { ref } aus 'vue';
const post = ref('')
Skript>
<Vorlage>
<div>
<EingangTyp="Text"V-Modell="Post">
<Tastev-on: klicken="$emit('button-clicked', post)">PostTaste>
div>
Vorlage>

Dieser Codeblock zeigt, wie ein benutzerdefiniertes Ereignis von einer untergeordneten Komponente ausgegeben wird. Das Kind initialisiert zunächst eine Post-Variable mit einer leeren Zeichenfolge.

Die untergeordnete Komponente bindet dann das Eingabeelement mit dem V-Modell an die Post-Variable, a Vue-Datenbindungsrichtlinie. Diese Bindung ermöglicht Änderungen, die Sie am Eingabefeld vornehmen, um die Post-Variable automatisch zu aktualisieren.

Das Schaltflächenelement verfügt über eine v-on-Anweisung, die auf Klickereignisse auf der Schaltfläche wartet. Der Button-Klick ruft die Methode $emit mit zwei Argumenten auf: dem Ereignisnamen „button-clicked“ und dem Wert der Post-Variablen.

Die übergeordnete Komponente kann nun mit der v-on-Anweisung für auf das benutzerdefinierte Ereignis warten Umgang mit Ereignissen in Vue:

 ParentComponent.vue 
import { ref } from „vue“;
importiere ChildComponent aus „./components/ChildComponent.vue“;
const postList = ref([])
const addPosts = (post) => {
 postList.value.push (Beitrag)
}
Skript>
<Vorlage>
<div>
<ChildComponent @angeklickt=„addPosts“/>
<ul>
<liv-für=„Beitrag in Beitragsliste“>{{ Post }}li>
ul>
div>
Vorlage>

Dieser Codeblock demonstriert, wie eine übergeordnete Komponente die untergeordnete Komponente von zuvor importiert und verwendet. Die übergeordnete Komponente definiert a Beitragsliste Array-Variable als reaktive Referenz. Die Komponente definiert dann eine Beiträge hinzufügen Funktion, die ausgeführt wird und a Post Streit. Die Funktion fügt dem postList-Array einen neuen Beitrag mit hinzu drücken() Methode.

Der @button-geklickt Der Ereignis-Listener erfasst das benutzerdefinierte Ereignis ChildComponent wird ausgegeben, wenn Sie auf die Schaltfläche klicken. Dieses Ereignis bewirkt, dass die Funktion „addPosts“ ausgeführt wird. Schließlich hängt der Codeblock an v-für Richtlinie für Rendering-Listen in Vue zum ul-Element, um über das postList-Array zu iterieren.

Ausgeben von Ereignissen mit dem defineEmits-Makro

Vue 3 führte das ein defineEmits Makro, das explizit die Ereignisse definiert, die eine Komponente ausgeben kann. Dieses Makro bietet eine typsichere Möglichkeit zum Ausgeben von Ereignissen, die zu einer strukturierteren Codebasis führen.

Hier ist ein Beispiel dafür, wie Sie das Makro „defineEmits“ verwenden und in Ihrer untergeordneten Komponente aufrufen können:

 ChildComponent.vue 
<Skriptaufstellen>
import { ref } from „vue“;
const emit = defineEmits(["button-clicked"]);
const post = ref("");
const buttonClick = () => {
 emit("button-clicked", post.value);
};
Skript>
<Vorlage>
<div>
<EingangTyp="Text"V-Modell="Post" />
<Tastev-on: klicken=„buttonClick“>PostTaste>
div>
Vorlage>

Während die Funktionalität gleich bleibt, gibt es erhebliche Unterschiede in der Codesyntax zwischen dem obigen Codeblock und dem mit dem $emittieren Funktion.

In diesem Codeblock ist die defineEmits Makro definiert das angeklickt Fall. Durch den Aufruf dieses Makros gibt der Codeblock eine $emit-Funktion zurück, mit der Sie die definierten Ereignisse ausgeben können. Das an das Makro „defineEmits“ innerhalb der Komponente übergebene Array enthält alle Ereignisse, die Sie an die übergeordnete Komponente ausgeben müssen.

Als nächstes definiert der Codeblock a SchaltflächeKlicken Funktion. Diese Funktion gibt das Button-Click-Ereignis und die Post-Variable an die übergeordnete Komponente aus. Der Vorlagenblock der untergeordneten Komponente enthält ein Schaltflächenelement.

Das Schaltflächenelement verfügt über eine v-on: klicken Direktive, die die buttonClick-Funktion auslöst. Die übergeordnete Komponente kann die untergeordnete Komponente dann auf die gleiche Weise verwenden, wie sie es mit der Methode $emit getan hat.

Vue-Entwickler profitieren von einer komponentenbasierten Architektur

Sie können von einer untergeordneten Komponente zu ihrer übergeordneten Komponente kommunizieren, indem Sie Ereignisse mithilfe der Methode $emit und des Makros defineEmits ausgeben.

Sie können von der komponentenbasierten Architektur von Vue profitieren, da Sie damit strukturierteren und prägnanteren Code schreiben können. Mit modernen JavaScript-Frameworks wie Vue können Sie Web Components, einen W3C-Webstandard, verwenden, um diese komponentenbasierte Architektur zu erreichen.