Shrnutí

V této lekci jste se naučili, že:

• Stránka se dělí na komponenty, každou ve vlastním souboru .vue s vlastní šablonou, <script setup> a <style scoped>, který platí jen pro prvky dané komponenty. App.vue je ta hlavní.
• Komponenta, která používá jinou, si ji importuje ve svém <script setup>, import PolozkaMenu from "./PolozkaMenu.vue"; (přípona .vue je povinná), a vloží ji do šablony, <PolozkaMenu />, tolikrát, kolikrát potřebuje.
• Každý soubor je modul a co je v něm, existuje jen tam, pokud to soubor neexportuje. export default exportuje hlavní hodnotu souboru, která se importuje bez závorek, pod jménem, které si vyberete. export const exportuje hodnotu pod jejím jménem a ta se importuje ve složených závorkách: import { nazevKavarny } from "./kavarna.js";. <script setup> svou komponentu exportuje sám a vlastní exporty mít nemůže.
• Komponenty se pojmenovávají v PascalCase, stejně v souboru, v importu i v tagu. Jinak napsaný tag nebo chybějící import dá v konzoli varování [Vue warn]: Failed to resolve component.
• Rodič komponentě předává data v props, které komponenta deklaruje pomocí defineProps: cena: { type: Number, required: true }, nebo s default. Bez dvojtečky je props text, s dvojtečkou JavaScript: :cena="55", :polozka="polozka".
• Props jsou jen ke čtení. Co patří jen komponentě, je její vlastní stav, ref, a každá kopie komponenty má svůj.
• v-for funguje i na komponentách, s :key, a celý objekt může být jedna props.

V další lekci, Události komponent, uvidíte, jak komponenta dá rodiči vědět, že se něco stalo, třeba že si zákazník objednal položku, aby rodič mohl změnit svá data.

Nejdřív si ale vše procvičte na recenzích kavárny. Recenze.vue má jen svůj styl a zbytek komponenty napíšete sami.