Shrnutí

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

• Komponenta nemůže měnit data svého rodiče. Že se něco stalo, mu oznámí událostí: const emit = defineEmits(["objednat"]); ji deklaruje a emit("objednat", polozka.id) ji vyšle, ve skriptu nebo přímo v šabloně, @click="emit('objednat', polozka.id)".
• Rodič poslouchá pomocí @objednat="pridejDoObjednavky" a hodnoty události se stanou argumenty obsluhy: emit("zmenit-pocet", polozka.id, 1) zavolá zmenPocet(id, zmena).
• Události se pojmenovávají podle toho, co se stalo nebo o co komponenta žádá, jejími slovy, a jména z několika slov se píšou v kebab-case: zmenit-pocet.
• Každý údaj má jediný zdroj pravdy. Když ho potřebuje víc komponent, žije v jejich společném rodiči, který jim ho předává jako props a mění ho, když ho o to událostmi požádají. To je přesun stavu nahoru (lifting state up). Kopie dat ve vlastním refu komponenty by brzy ukazovala něco jiného než zbytek stránky.
• Komponenta, která mění svou props, dostane [Vue warn]: Set operation on key "pocet" failed: target is readonly. a nic se nezmění: musí vyslat událost.
• v-model funguje i na vlastních komponentách: <Mnozstvi v-model="pocet" /> v rodiči, const pocet = defineModel(); v komponentě. Změna modelu změní hodnotu rodiče a model může jít dál do textového pole uvnitř, <textarea v-model="text">.

V další lekci, Sloty, komponentě předáte nejen hodnoty, ale i kus šablony: obsah mezi jejími tagy, jako to děláte u prvků HTML.

Nejdřív si ale vše procvičte na seznamu objednávek, které má barista připravit. Listek.vue má jen svůj styl a zbytek napíšete sami.