Víc událostí

Každý řádek objednávky má teď tlačítka −, + a Odebrat. Mění objednávku, takže budou vysílat události a změny udělá App.vue. Komponenta může vysílat tolik druhů událostí, kolik potřebuje, a všechny je vyjmenuje v defineEmits:

const emit = defineEmits(["zmenit-pocet", "odebrat"]);

Rodič poslouchá každou z nich s vlastní obsluhou:

<Objednavka :objednavka="objednavka" @zmenit-pocet="zmenPocet" @odebrat="odeberPolozku" />

Událost může nést víc než jednu hodnotu. emit('zmenit-pocet', polozka.id, 1) pošle dvě a obsluha je dostane jako dva argumenty, ve stejném pořadí:

function zmenPocet(id, zmena) {
    // id je id položky, zmena je 1 nebo -1
}

Jak události pojmenovat:

• Podle toho, co se stalo nebo o co komponenta žádá, jejími slovy: objednat, odebrat, zmenit-pocet. Komponenta neví, jak rodič položku odebere, a nepotřebuje to vědět: řekne odebrat a App.vue rozhodne, co udělá.
• Jméno z několika slov se píše malými písmeny se spojovníky mezi slovy: zmenit-pocet, stejně v emit() i za @. Tomuto zápisu se říká kebab-case, protože slova vypadají jako kousky masa na špízu.

Když má App.vue položku odebrat, nahradí objednavka.value novým polem z filter, jak to znáte z lekce Stav a události.