Props

Drei Espressi sind keine Speisekarte. Jeder MenueEintrag soll einen anderen Eintrag zeigen, also muss die Komponente ihre Daten von ihrem Elternteil bekommen, der Komponente, die sie verwendet, hier App.vue. Dafür sind Props da (kurz für „Properties“, Eigenschaften): Werte, die ein Elternteil an eine Komponente übergibt, geschrieben wie die Attribute eines HTML-Elements:

<MenueEintrag name="Espresso" :preis="2" />
<MenueEintrag name="Grüner Tee" :preis="3" />

Die Komponente sagt mit defineProps in ihrem <script setup>, welche Props sie annimmt, und verwendet sie in ihrer Vorlage wie Variablen:

<script setup>
defineProps({
    name: { type: String, required: true },
    preis: { type: Number, required: true },
});
</script>

<template>
    <li class="eintrag">
        <span>{{ name }}</span>
        <span class="preis">{{ preis }} €</span>
    </li>
</template>

Jede Prop hat einen Namen und ein Objekt, das sie beschreibt:

• type sagt, was für ein Wert es ist: String für Text, Number, Boolean für true oder false, Array oder Object.
• required: true bedeutet, dass der Elternteil sie übergeben muss.
• default ist der Wert der Prop, wenn der Elternteil sie nicht übergibt, zum Beispiel kategorie: { type: String, default: "Kaffee" }.

Vue prüft die Props, während die App läuft, und wenn eine fehlt oder den falschen Typ hat, meldet es das in der Konsole: [Vue warn]: Missing required prop: "name". Und defineProps braucht keinen Import: Vue kennt es in <script setup>.

Beachte den Doppelpunkt in :preis="2". Das ist v-bind, das du von :src kennst: Der Wert in den Anführungszeichen ist JavaScript, also übergibt :preis="2" die Zahl 2. Ohne Doppelpunkt ist eine Prop immer Text. preis="2" übergibt den Text "2", und Vue warnt:

[Vue warn]: Invalid prop: type check failed for prop "preis". Expected Number with value 2, got String with value "2".

Schreibe also Text ohne Doppelpunkt, wie in name="Espresso", und alles andere mit einem: Zahlen, true und false, Variablen.