Vaše první komponenta

Vaše aplikace pro kavárnu za poslední lekce vyrostla: nadpis, nabídka, objednávka s celkovou cenou, formulář… To všechno je v App.vue a s každou novou funkcí je soubor delší. V souboru o pár stovkách řádků chvíli trvá, než najdete místo, které chcete změnit. A některé části se opakují: každá položka nabídky vypadá stejně, jen má jiný název a cenu.

Proto se aplikace ve Vue skládají z komponent: částí stránky, z nichž každá má vlastní soubor .vue s vlastní šablonou, skriptem a stylem. Jednu už znáte: App.vue je komponenta, ta hlavní. Tady je další, PolozkaMenu.vue, jedna položka nabídky:

<template>
    <li class="polozka">
        <span>Espresso</span>
        <span class="cena">55 Kč</span>
    </li>
</template>

<style scoped>
.polozka {
    display: flex;
    background: white;
}
</style>

Nemá <script setup>, protože zatím žádné proměnné nepotřebuje. Její <style scoped> platí jen pro prvky této komponenty: prvek s třídou polozka jinde v aplikaci tenhle styl nedostane.

Aby App.vue mohla komponentu použít, importuje si ji ve svém <script setup> a vloží ji do šablony, jako by to byl prvek HTML:

<script setup>
import PolozkaMenu from "./PolozkaMenu.vue";
</script>

<template>
    <h1>Kavárna Na Rohu</h1>
    <ul class="nabidka">
        <PolozkaMenu />
        <PolozkaMenu />
    </ul>
</template>

import PolozkaMenu from "./PolozkaMenu.vue"; zpřístupní komponentu v App.vue pod jménem PolozkaMenu. ./ znamená „ve stejné složce jako tento soubor“ a přípona .vue na konci je povinná. Bez ní se pod náhledem objeví červený pruh se zprávou App.vue(2): napište i příponu souboru: „./PolozkaMenu.vue“.

V šabloně se <PolozkaMenu /> nahradí šablonou komponenty. Tag se zavírá sám pomocí />, protože do něj nic nevkládáte. A komponentu můžete použít, kolikrát chcete: tenhle seznam má dvě položky a obě vytvořila PolozkaMenu.

S komponentami mají cvičení víc záložek: nejdřív App.vue, pak komponenty a nakonec soubory, které znáte: main.js, index.html a style.css.