Неочевидное: События Vue3 и JS |

В этом видео-уроке мы рассмотрим неочевидные особенности нативных и пользовательских событий во Vue3.

Нативные события передаются вверх по DOM-дереву, то есть от вложенных элементов к родительским. Это означает, что если вы добавляете слушатель события к дочернему элементу, событие будет передано и обработано родительским элементом, если он также имеет слушатель для этого события.

В Vue3 пользовательские события не передаются вверх по DOM-дереву, в отличие от нативных событий. Вместо этого, когда вы вызываете метод $emit() из дочернего компонента, Vue3 ищет компонент-родитель, который имеет слушатель для этого события и вызывает его. Это означает, что обработка пользовательских событий ограничена только на компонентах-родителях, которые имеют слушатель для данного события.

Тем не менее, важно знать, что нативные и пользовательские события в Vue3 имеют разные способы обработки. Нативные события передаются вверх по DOM-дереву, а пользовательские события Vue3 — нет. Это означает, что если вы используете нативное событие на вложенном компоненте, оно может быть обработано на родительском компоненте. Однако, если вы используете пользовательское событие, которое вы определили в компоненте, оно будет обработано только на этом компоненте и не будет передаваться вверх по DOM-дереву.

Используя Composition API, вы можете определять обработчики событий внутри компонента и регистрировать их с помощью функции onMounted. Это позволяет управлять обработкой событий более гибко и эффективно в Vue3.

В заключении, мы рассмотрели неочевидные особенности нативных и пользовательских событий во Vue3. Знание этих особенностей может помочь вам лучше понимать, как работают события в вашем приложении и как правильно использовать их для достижения желаемого результата.

00:00 — Вступление
00:42 — Нативные события
11:31 — События в компонентах
21:56 — Про курс

#Vue3 #сборки #подключение #проект #фреймворк #пользовательский #интерфейс #разработка #инструменты #библиотеки.

👉 👉 👉 Полноформатный курс Vue3: https://lectoria.pro/catalog/vuejs-3....

👉 Чат телеграм Lectoria: https://t.me/lectoriachat
👉 Канал телеграм Lectoria: https://t.me/lectoriapro

✅ Instagram:   / lectoria.pro  
✅ VK: https://vk.com/lectoria
✅ Facebook: https://fb.com/lectoria.pro
✅ Сайт проекта Lectoria: https://lectoria.pro
🖥 Обучение веб-разработке Lectoria:    / @lectoria  
🖥 Обучение разработке на MODX Revolution:    / @openmod