В Vue.js шина событий является механизмом для передачи данных и взаимодействия между компонентами без использования прямой связи родительского-дочернего компонента. Используя шину событий, компоненты могут взаимодействовать друг с другом, отправлять и принимать сообщения, обновлять состояние и т.д.
Чтобы вернуть значения из шины событий в Vue.js, мы можем использовать два метода: emit и on.
Метод emit позволяет компоненту отправить событие (сообщение) с данными в шину событий. Этот метод принимает два параметра: название события и передаваемые данные. Например:
// Отправка события с данными из компонента A
this.$emit('some-event', eventData);
Здесь some-event - название события, а eventData - передаваемые данные.
Для получения этих данных в другом компоненте мы можем использовать метод on. Метод on позволяет компоненту "прослушивать" шину событий и реагировать на определенные события. Он принимает два параметра: название события и функцию обратного вызова. Например:
// Прослушивание события и получение данных в компоненте B
this.$on('some-event', (eventData) => {
// Обработка полученных данных
});
Внутри функции обратного вызова мы можем обрабатывать переданные данные из события.
Кроме того, мы можем использовать глобальную шину событий, доступную через объект Vue. Для отправки события мы можем использовать метод $emit, а для прослушивания события - метод $on. Например:
// Отправка события с данными из любого компонента
Vue.$emit('some-event', eventData);
// Прослушивание события и получение данных из любого компонента
Vue.$on('some-event', (eventData) => {
// Обработка полученных данных
});
Это дает возможность взаимодействовать между компонентами, находящимися на разных уровнях иерархии, или даже между компонентами, находящимися в разных компонентах приложения.
В общем, шина событий в Vue.js предоставляет удобный способ передавать данные и взаимодействовать между компонентами. Объекты emit и on позволяют отправлять и принимать сообщения, что делает разработку приложений более гибкой и модульной.