Shrnutí

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

• Komponenta si může ve své šabloně nechat místo pro obsah od rodiče: <slot />. Rodič dá obsah mezi tagy komponenty a Vue ho ukáže na místě slotu. Komponenta bez slotu obsah vynechá, a to bez varování.
• Obsah slotu patří rodiči: používá jeho refy, vypočítané hodnoty a funkce i jeho styly. Nevidí props ani proměnné komponenty a <style scoped> komponenty pro něj neplatí.
• Co je mezi <slot> a </slot>, je náhradní obsah. Ukáže se, když rodič slotu nedá žádný obsah, nebo obsah, který nic neukáže, třeba prvek, jehož v-if neplatí.
• Komponenta může mít víc slotů se jmény: <slot name="zapati" />. Rodič je vyplní pomocí <template #zapati>, kde #zapati je zkratka pro v-slot:zapati. Obsah mimo takový <template> přijde do výchozího slotu, toho beze jména.
• Data a krátké texty patří do props, kusy stránky do slotů. Komponenty, které stránce dávají tvar, třeba panel, karta nebo dialogové okno, mají sloty, abyste je mohli znovu použít s jakýmkoli obsahem.

V další lekci, Miniprojekt: Fotogalerie, dáte dohromady komponenty, props, události a sloty v galerii fotek z výletu.

Nejdřív si ale vše procvičte na rámečku s radami pro hosty kavárny, Tip.vue. Jeho styl je hotový a šablonu napíšete sami.