Несколько событий

У каждой строки заказа теперь есть кнопки −, + и «Удалить». Они меняют заказ, поэтому будут генерировать события, а изменения сделает App.vue. Компонент может генерировать сколько угодно видов событий и перечисляет их все в defineEmits:

const emit = defineEmits(["change-count", "remove"]);

Родитель слушает каждое из них своим обработчиком:

<OrderList :order="order" @change-count="changeCount" @remove="removeItem" />

Событие может нести не одно значение. emit('change-count', item.id, 1) отправляет два, и обработчик получает их как два аргумента, в том же порядке:

function changeCount(id, change) {
    // id — это id позиции, change — это 1 или -1
}

Как называть события:

• По тому, что произошло или о чём просит компонент, его собственными словами: order, remove, change-count. Компонент не знает, как родитель удаляет позицию, и ему это не нужно: он говорит remove, а что делать, решает App.vue.
• Имя из нескольких слов пишут строчными буквами, а слова разделяют дефисами: change-count, одинаково в emit() и после @. Такой стиль называется kebab-case («шашлычный регистр»): слова в нём выстроены, как кусочки мяса на шампуре.

Чтобы удалить позицию, App.vue заменяет order.value новым массивом, полученным из filter, как вы уже знаете из урока «Состояние и события».