Итоги

В этом уроке вы узнали, что:

• Компонент не может менять данные родителя. Он сообщает родителю, что что-то произошло, с помощью события: const emit = defineEmits(["order"]); объявляет его, а emit("order", item.id) генерирует, в скрипте или прямо в шаблоне, @click="emit('order', item.id)".
• Родитель слушает событие через @order="addToOrder", а значения события становятся аргументами обработчика: emit("change-count", item.id, 1) вызывает changeCount(id, change).
• События называют по тому, что произошло или о чём просит компонент, его собственными словами, а имена из нескольких слов пишут в kebab-case: change-count.
• У каждой порции данных есть единый источник истины. Если данные нужны нескольким компонентам, они живут в их общем родителе, который передаёт их пропсами и меняет, когда его просят об этом событиями. Это и есть подъём состояния. Копия в компоненте, его собственный реф, устаревает.
• Компонент, который меняет свой проп, получает [Vue warn]: Set operation on key "count" failed: target is readonly., и ничего не меняется: ему нужно сгенерировать событие.
• v-model работает на ваших собственных компонентах: <Quantity v-model="count" /> в родителе, const count = defineModel(); в компоненте. Изменение модели меняет значение родителя, а модель можно передать дальше, в поле внутри компонента, <textarea v-model="note">.

В следующем уроке, «Слоты», вы передадите компоненту не только значения, но и кусок шаблона: содержимое между его тегами, как это делается с HTML-элементами.

А пока немного практики: список заказов, которые нужно приготовить бариста. В Ticket.vue есть только стили, остальное вы напишете сами.