Eine Liste von Komponenten

Eine echte Speisekarte schreibt man nicht von Hand, einen <MenueEintrag> nach dem anderen. Sie kommt aus Daten, und Daten zeigst du mit v-for, das bei Komponenten genauso funktioniert wie bei Elementen:

<MenueEintrag v-for="eintrag in menue" :key="eintrag.id" :name="eintrag.name" :preis="eintrag.preis" />

Jedes Element von menue bekommt einen eigenen MenueEintrag mit eigenen Props. :key kommt an die Komponente, wie es an ein <li> kommt: Vue unterscheidet damit die Einträge. Es ist keine Prop, die Komponente deklariert es also nicht.

Braucht eine Komponente das meiste eines Objekts, ist es einfacher, ihr das ganze Objekt als eine Prop zu übergeben:

<MenueEintrag v-for="eintrag in menue" :key="eintrag.id" :eintrag="eintrag" />

<script setup>
defineProps({
    eintrag: { type: Object, required: true },
});
</script>

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

Der Typ der Prop ist Object, und die Vorlage liest ihre Felder wie bei jedem Objekt: eintrag.name. Bekommen die Einträge der Speisekarte ein neues Feld, sagen wir vegan, kann die Komponente es anzeigen, und App.vue ändert sich überhaupt nicht.

Und beachte den Doppelpunkt in :eintrag="eintrag". Das eintrag links ist der Name der Prop, und das rechts ist JavaScript: die Variable eintrag aus v-for, der aktuelle Eintrag der Speisekarte.