Props jen ke čtení

Props vedou jedním směrem: od rodiče dolů ke komponentě. Komponenta je čte, ale měnit je nesmí. Řekněme, že každá položka nabídky dostane tlačítko pro velký šálek, který stojí o 10 Kč víc:

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

function zvetsi() {
    props.cena = props.cena + 10;
}
</script>

<template>
    <li class="polozka">
        <span>{{ nazev }}</span>
        <span class="cena">{{ cena }} Kč</span>
        <button @click="zvetsi">Velký</button>
    </li>
</template>

defineProps vrátí objekt se všemi props. Tady je uložený v proměnné props, aby je mohl číst skript: props.cena. (V šabloně je cena pořád jen cena.) Kliknutí na tlačítko ale cenu nezmění a konzole hlásí:

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

Props jsou jen ke čtení (read-only, odtud readonly ve varování): dají se číst, ne měnit. Cena patří rodiči, který ji může předat i dalším komponentám. Kdyby ji mohla měnit každá komponenta, různá místa stránky by ukazovala různé ceny a nikdo by nevěděl, která je správná. (V další lekci uvidíte, jak komponenta rodiče požádá, aby svá data změnil.)

Jestli je zrovna tahle položka velká, je věc komponenty, ne rodiče. Je to vlastní stav komponenty: ref v jejím <script setup>, stejně jako v App.vue:

const velky = ref(false);

A každá <PolozkaMenu /> dostane svůj. Každá položka na stránce je samostatná kopie komponenty s vlastními proměnnými, takže velké espresso neudělá velkým i čaj. Cena, kterou položka ukazuje, pak může být vypočítaná hodnota, složená z props a ze stavu komponenty.