Zusammenfassung

In dieser Lektion hast du gelernt:

• Eine Seite wird in Komponenten aufgeteilt, jede in einer eigenen .vue-Datei, mit eigener Vorlage, eigenem <script setup> und eigenem <style scoped>, das nur die eigenen Elemente der Komponente gestaltet. App.vue ist die Hauptkomponente.
• Eine Komponente, die eine andere verwendet, importiert sie in ihrem <script setup>, import MenueEintrag from "./MenueEintrag.vue"; (das .vue ist Pflicht), und setzt sie in ihre Vorlage, <MenueEintrag />, so oft sie will.
• Jede Datei ist ein Modul, und was darin steht, gibt es nur dort, außer die Datei exportiert es. export default exportiert den Hauptwert der Datei, der ohne Klammern unter einem Namen deiner Wahl importiert wird. export const exportiert einen Wert unter seinem Namen, der in Klammern importiert wird: import { cafeName } from "./cafe.js";. <script setup> exportiert seine Komponente selbst und darf keine eigenen Exporte haben.
• Komponenten werden in PascalCase benannt, gleich in der Datei, im Import und im Tag. Ein anders geschriebener Tag oder ein fehlender Import ergibt [Vue warn]: Failed to resolve component in der Konsole.
• Ein Elternteil übergibt Daten in Props an eine Komponente, die sie mit defineProps deklariert: preis: { type: Number, required: true } oder mit einem default. Ohne Doppelpunkt ist eine Prop Text, mit Doppelpunkt ist sie JavaScript: :preis="2", :eintrag="eintrag".
• Props sind schreibgeschützt. Was nur der Komponente gehört, ist ihr eigener State, eine ref, und jede Kopie der Komponente hat ihren eigenen.
• v-for funktioniert bei Komponenten, mit :key, und ein ganzes Objekt kann eine einzige Prop sein.

In der nächsten Lektion, Ereignisse von Komponenten, siehst du, wie eine Komponente ihrem Elternteil mitteilt, dass etwas passiert ist, zum Beispiel dass der Kunde einen Artikel bestellt hat, damit der Elternteil seine Daten ändern kann.

Aber zuerst ein bisschen Übung: die Bewertungen des Cafés. Bewertung.vue hat nur ihren Stil, den Rest der Komponente schreibst du selbst.