Zusammenfassung

In dieser Lektion hast du gelernt:

• Eine Komponente kann die Daten ihres Elternteils nicht ändern. Sie teilt dem Elternteil mit einem Ereignis mit, dass etwas passiert ist: const emit = defineEmits(["bestellen"]); deklariert es, und emit("bestellen", eintrag.id) sendet es, im Skript oder direkt in der Vorlage, @click="emit('bestellen', eintrag.id)".
• Der Elternteil hört mit @bestellen="zurBestellungHinzufuegen" zu, und die Werte des Ereignisses werden zu den Argumenten des Handlers: emit("anzahl-aendern", posten.id, 1) ruft anzahlAendern(id, aenderung) auf.
• Ereignisse werden nach dem benannt, was passiert ist oder worum die Komponente bittet, in ihren eigenen Worten, und Namen aus mehreren Wörtern werden in Kebab-Case geschrieben: anzahl-aendern.
• Jedes Datum hat eine einzige Datenquelle. Brauchen mehrere Komponenten es, lebt es in ihrem gemeinsamen Elternteil, der es als Props an sie übergibt und ändert, wenn sie mit Ereignissen darum bitten. Das heißt State nach oben verlagern. Eine Kopie in einer Komponente, ihre eigene Ref, wird veraltet.
• Eine Komponente, die ihre Prop ändert, bekommt [Vue warn]: Set operation on key "anzahl" failed: target is readonly., und es ändert sich nichts: Sie muss ein Ereignis senden.
• v-model funktioniert bei deinen eigenen Komponenten: <Menge v-model="anzahl" /> im Elternteil, const anzahl = defineModel(); in der Komponente. Das Ändern des Modells ändert den Wert des Elternteils, und das Modell kann an ein Feld darin weitergehen, <textarea v-model="notiz">.

In der nächsten Lektion, Slots, übergibst du einer Komponente nicht nur Werte, sondern ein Stück der Vorlage: Inhalt zwischen ihren Tags, wie bei HTML-Elementen.

Aber zuerst ein bisschen Übung: die Liste der Bestellungen, die der Barista zubereiten muss. Bestellzettel.vue hat nur ihren Stil, den Rest schreibst du selbst.