Урок 10 :: Communicating Events :: События связи
Вот, что мы с Вами сделаем на этом уроке.
Пройдем по этой ссылке:
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().
📄 components/ProductDisplay.js
methods: {
addToCart() {
this.$emit('add-to-cart')
}
...
}
Мы напишем this.$emit() и создадим событие под названием 'add-to-cart' ("добавить в корзину"). Поэтому, когда нажимается кнопка, мы эмитируем, или испускаем, или выплескиваем (bubbling up) это событие. Мы можем прослушивать это событие из родительской области, где мы используем отображение продукта (product-display), добавив прослушиватель: @add-to-cart.
📄 index.html
<product-display :premium="premium" @add-to-cart="updateCart"></product-display>
Когда это событие “услышит” родитель, то этот родитель вызовет новый метод с именем updateCart, который мы добавим в main.js (см код ниже картинки).
📄 main.js
const app = Vue.createApp({
data() {
return {
cart: [],
...
}
},
methods: {
updateCart() {
this.cart += 1
}
}
})
Если мы проверим эти наработки в браузере, то обнаружим следующее. Теперь мы сможем нажать кнопку "Добавить в корзину" ("Add To Cart"), которая позволит родителю узнать, что произошло событие "Добавить в корзину" (add-to-cart), и это событие запускает метод updateCart().
Добавление идентификатора товара id в корзину
Чтобы сделать наше приложение более реалистичным, наша корзина (cart) не должна быть просто числом. Это должен быть массив, содержащий идентификаторы продуктов, которые в него добавляются. Так что давайте проведем небольшой рефакторинг.
📄 main.js
const app = Vue.createApp({
data() {
return {
cart: [],
...
}
},
methods: {
updateCart(id) {
this.cart.push(id)
}
}
})
Теперь корзина (cart) представляет собой массив, и updateCart(id) помещает в нее идентификатор продукта (id). Нам просто нужно добавить полезную нагрузку в наше событие добавления в корзину (add-to-cart), чтобы у updateCart был доступ к этому идентификатору (id).
📄 components/ProductDisplay.js
methods: {
addToCart() {
this.$emit('add-to-cart', this.variants[this.selectedVariant].id)
}
...
}
Здесь мы добавили второй параметр и захватили идентификатор продукта (id) так же, как мы захватили изображение (image) и количество (quantity) раньше:
📄 components/ProductDisplay.js
computed: {
image() {
return this.variants[this.selectedVariant].image
},
inStock() {
return this.variants[this.selectedVariant].quantity
}
}
Теперь в браузере вы можете видеть, что мы добавляем идентификаторы товаров в корзину, которая теперь представляет собой массив.
Но нам не нужно на самом деле отображать эти идентификаторы. Мы просто хотим показать, сколько товаров находится в корзине. К счастью есть быстрое и простое решение.
📄 index.html
<div id="app">
...
<div class="cart">Cart({{ cart.length }})</div>
...
</div>
Добавив cart.length, мы теперь будем отображать только количество товаров в корзине (cart).
Задача кодирования
Мы подошли к концу этого урока, теперь будем решать новые задачи кодирования.
Вот, что надо сделать.
Добавьте новую кнопку к product-display, при клике на которую удалялся 1 товар из корзины (cart).
Вы можете найти код решения, загрузив L10-end ветвь репозитория или просмотрев решение в Codepen.
Чтобы перейти на ветку с файлами окончания урока 10 выполните команду:
git checkout L10-end
Код файла index.html данного урока
<div id="app">
<div class="nav-bar"></div>
<div class="cart">Cart({{ cart.length }})</div>
<product-display
:premium="premium"
@add-to-cart="updateCart"
@remove-from-cart="removeById"> <!-- solution -->
</product-display>
</div>
<!-- Import App -->
<script src="./main.js"></script>
<!-- Import Components -->
<script src="./components/ProductDisplay.js"></script>
<!-- Mount App -->
<script>
const mountedApp = app.mount('#app')
</script
Код файла main.js данного урока
См здесь: Код файла main.js данного урока
Код файла ProductDisplay.js данного урока
См здесь: Код файла ProductDisplay.js данного урока
Результат выполнения данного урока
Примечание переводчика
1. Я слегка меняю контент оригинальных файлов курса для тренировки, проверки русификации и т.д.
2. Код для HTML я размещаю в этом файле между тегами body.
3. Обратите внимание, чтобы в консоле браузера не было ошибок.
Теперь Нажмите здесь для перехода к следующему уроку ➳
... или ...
Ссылки по теме.