Mehrere Ereignisse

Jede Zeile der Bestellung hat jetzt die Buttons −, + und Entfernen. Sie ändern die Bestellung, also senden sie Ereignisse, und App.vue nimmt die Änderungen vor. Eine Komponente kann so viele Arten von Ereignissen senden, wie sie braucht, und listet sie alle in defineEmits auf:

const emit = defineEmits(["anzahl-aendern", "entfernen"]);

Der Elternteil hört auf jedes davon, mit einem eigenen Handler:

<Bestellliste :bestellung="bestellung" @anzahl-aendern="anzahlAendern" @entfernen="postenEntfernen" />

Ein Ereignis kann mehr als einen Wert mitbringen. emit('anzahl-aendern', posten.id, 1) sendet zwei, und der Handler bekommt sie als zwei Argumente, in derselben Reihenfolge:

function anzahlAendern(id, aenderung) {
    // id ist die id des Eintrags, aenderung ist 1 oder -1
}

So benennst du Ereignisse:

• Nach dem, was passiert ist oder worum die Komponente bittet, in ihren eigenen Worten: bestellen, entfernen, anzahl-aendern. Die Komponente weiß nicht, wie der Elternteil einen Eintrag entfernt, und muss es nicht wissen: Sie sagt entfernen, und App.vue entscheidet, was zu tun ist.
• Ein Name aus mehreren Wörtern wird klein geschrieben, mit Bindestrichen zwischen den Wörtern: anzahl-aendern, gleich in emit() und nach @. Diese Schreibweise heißt Kebab-Case, weil die Wörter wie Fleischstücke auf einem Spieß aussehen.

Um einen Eintrag zu entfernen, ersetzt App.vue bestellung.value durch ein neues Array aus filter, wie du es aus der Lektion State und Ereignisse kennst.