Вот, что мы с Вами сделаем на этом уроке.
Пройдем по этой ссылке: Communicating Events ➳
... Все внимательно послушаем, посмотрим, прочитаем.
Затем сделаем конспект (мой см ниже).
Конспект
События связи (Communicating Events)
В этом уроке мы рассмотрим концепцию событий связи, которые происходят внутри наших компонентов.
Чтобы начать этот урок, вы можете либо получить программой git коммандой checkout исходный код в ветке L10-startрепозитория, либо перейти в CodePen, чтобы взять файлы там.
Примечание переводчика
Чтобы перейти на ветку с файлами начала урока 10 выполните команду:
git checkout L10-start
Наша Цель
Дать нашему компоненту возможность сообщить своему родителю о событии, произошедшем внутри него. Другими словами, обеспечить возможность передавать информацию о событии от дочки к родителю.
Излучение (эмитирование) события (Emitting the event)
Когда мы переработали программы на нашем последнем уроке, переместив код, связанный с продуктом, в новый компонент отображения продукта (product-display), мы отключили возможность нажимать кнопку "Добавить в корзину" ("Add to Cart") и увеличивать значение количества товара в корзине (cart). Это связано с тем, что корзина (cart) живет за пределами компонента отображения продукта, внутри корневого приложения Vue в main.js.
Нам нужно дать компоненту отображения продукта (product-display) возможность объявить о том, что его кнопка нажата. Как нам добиться того, чтобы это произошло?
Мы уже знаем, что пропсы (props) - это способ передачи данных в дочерний компонент, но как насчет того, когда внутри этого компонента что-то происходит, например, нажатие кнопки? Как мы можем сообщить другим частям нашего приложения о том, что это событие произошло?
Ответ состоит в том, чтобы выдать (излучить, эмитировать, emit) это событие, сообщив родителю, что оно произошло. Давайте добавим эту возможность в наш компонент отображения продукта (product-display), изменив метод addToCart().
Мы напишем this.$emit() и создадим событие под названием 'add-to-cart' ("добавить в корзину"). Поэтому, когда нажимается кнопка, мы эмитируем, или испускаем, или выплескиваем (bubbling up) это событие. Мы можем прослушивать это событие из родительской области, где мы используем отображение продукта (product-display), добавив прослушиватель: @add-to-cart.
Когда это событие “услышит” родитель, то этот родитель вызовет новый метод с именем updateCart, который мы добавим в main.js (см код ниже картинки).
📄 main.js
Если мы проверим эти наработки в браузере, то обнаружим следующее. Теперь мы сможем нажать кнопку "Добавить в корзину" ("Add To Cart"), которая позволит родителю узнать, что произошло событие "Добавить в корзину" (add-to-cart), и это событие запускает метод updateCart().
Добавление идентификатора товара id в корзину
Чтобы сделать наше приложение более реалистичным, наша корзина (cart) не должна быть просто числом. Это должен быть массив, содержащий идентификаторы продуктов, которые в него добавляются. Так что давайте проведем небольшой рефакторинг.
📄 main.js
Теперь корзина (cart) представляет собой массив, и updateCart(id) помещает в нее идентификатор продукта (id). Нам просто нужно добавить полезную нагрузку в наше событие добавления в корзину (add-to-cart), чтобы у updateCart был доступ к этому идентификатору (id).
Теперь в браузере вы можете видеть, что мы добавляем идентификаторы товаров в корзину, которая теперь представляет собой массив.
Но нам не нужно на самом деле отображать эти идентификаторы. Мы просто хотим показать, сколько товаров находится в корзине. К счастью есть быстрое и простое решение.