Props

Tři espressa nejsou žádná nabídka. Každá PolozkaMenu má ukázat jinou položku, takže komponenta musí dostat data od svého rodiče, tedy komponenty, která ji používá, tady App.vue. K tomu slouží props (z anglického properties, vlastnosti): hodnoty, které rodič komponentě předá a které se píšou jako atributy prvku HTML:

<PolozkaMenu nazev="Espresso" :cena="55" />
<PolozkaMenu nazev="Zelený čaj" :cena="60" />

Komponenta říká, jaké props přijímá, pomocí defineProps ve svém <script setup> a v šabloně je používá jako proměnné:

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

<template>
    <li class="polozka">
        <span>{{ nazev }}</span>
        <span class="cena">{{ cena }} Kč</span>
    </li>
</template>

Každá z props má jméno a objekt, který ji popisuje:

• type je druh hodnoty: String pro text, Number pro číslo, Boolean pro true nebo false, Array pro pole a Object pro objekt.
• required: true znamená, že ji rodič předat musí.
• default je hodnota, kterou má, když ji rodič nepředá, třeba kategorie: { type: String, default: "káva" }.

Vue props za běhu aplikace kontroluje, a když nějaká chybí nebo má špatný typ, řekne to v konzoli: [Vue warn]: Missing required prop: "nazev". A defineProps se neimportuje: Vue ho v <script setup> zná samo.

Všimněte si dvojtečky v :cena="55". Je to v-bind, které znáte z :src: hodnota v uvozovkách je JavaScript, takže :cena="55" předá číslo 55. Bez dvojtečky je hodnota vždycky text. cena="55" předá text "55" a Vue varuje:

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

Text tedy pište bez dvojtečky, jako nazev="Espresso", a všechno ostatní s ní: čísla, true a false, proměnné.