Неочевидное: События Vue3 и JS | #vue #vuejs #vue3 #frontend #фронтенд

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

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

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

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

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

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

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

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

[НикитаСилич-пз]

Очень классный канал, удачи в продвижении!

[НикитаСилич-пз]

C кайфом объяснили и еще закрыли мой пробел со всплытием в нативном js. А то понимал, что оно всплывает, что иногда нужно писать stopPropagation, а как это работает до конца понятно не было, потому что в статьях как-то мутно написано

[topalek]

Когда, будут видео и будут ли, по разработке СРМ системы ?

[ВладимирСеменихин-кф]

Не понимаю зачем нужно вызывать функцию генерации эвента в обработчике нативного эвента input, по сути меняется только то, что передастся нативному эвенту callback или undefined

[gensec]

Я думаю что это плохая практика называть кастомные события так же как называются нативные.