Props sind schreibgeschützt

Props gehen nur in eine Richtung: vom Elternteil hinunter zur Komponente. Die Komponente liest sie, aber sie darf sie nicht ändern. Sagen wir, jeder Eintrag der Speisekarte bekommt einen Button für eine große Tasse, die 1 € mehr kostet:

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

function vergroessern() {
    props.preis = props.preis + 1;
}
</script>

<template>
    <li class="eintrag">
        <span>{{ name }}</span>
        <span class="preis">{{ preis }} €</span>
        <button @click="vergroessern">Groß</button>
    </li>
</template>

defineProps gibt die Props in einem Objekt zurück, hier als props gespeichert, für das Skript. (In der Vorlage heißt der Preis weiterhin einfach preis.) Ein Klick auf den Button ändert den Preis aber nicht, und die Konsole meldet:

[Vue warn]: Set operation on key "preis" failed: target is readonly.

Die Props sind schreibgeschützt (read-only): Sie können gelesen, aber nicht geändert werden. Der Preis gehört dem Elternteil, der ihn auch an andere Komponenten weitergeben kann. Könnte jede Komponente ihn ändern, würden verschiedene Teile der Seite verschiedene Preise zeigen, und niemand wüsste, welcher stimmt. (In der nächsten Lektion siehst du, wie eine Komponente ihren Elternteil bittet, dessen Daten zu ändern.)

Ob dieser eine Eintrag groß ist, ist Sache der Komponente, nicht des Elternteils. Das ist der eigene State der Komponente: eine ref in ihrem <script setup>, wie in App.vue:

const gross = ref(false);

Und jedes <MenueEintrag /> bekommt seine eigene. Jeder Eintrag auf der Seite ist eine eigene Kopie der Komponente mit eigenen Variablen, ein großer Espresso macht den Tee also nicht groß. Der Preis, den der Eintrag zeigt, kann dann ein berechneter Wert sein, gebildet aus der Prop und dem State der Komponente.