Создание глобальной шины событий в Vue 2
Development, Java | Комментировать запись
Шина событий и шаблон pub/sub – это способ заставить несвязанные компоненты приложения общаться друг с другом.
Систему событий, используемую в компонентах Vue, можно использовать и в шине событий.
Примечание: Это руководство предназначено для Vue 2. В Vue 3 $on, $off и $once были удалены. Вместо них рекомендуется использовать внешние библиотеки, которые предоставляют эту функцию.
В этом мануале вы узнаете, как создать мощную встроенную шину событий Vue.
Требования
- Локальная установка Node.js (чтобы найти инструкции по установке, выберите соответствующий дистрибутив: mac OS, Debian, CentOS, Ubuntu).
- Базовые знания настройки и компонентов Vue.js.
Мануал протестирован на версиях Node v15.3.0, npm v6.14.9 и vue v2.6.11.
1: Настройка проекта
В рамках этого руководства мы создадим простой базовый проект Vue помощью @vue/cli.
npx @vue/cli create vue-event-bus-example --default
Эта команда создаст новый проект Vue со стандартными конфигурациями: Vue 2, babel, eslint.
Перейдите во каталог проекта:
cd vue-event-bus-example
Когда мы создадим шину событий, нам нужно будет экспортировать ее куда-нибудь, чтобы ее могли использовать другие модули и компоненты приложения. Сначала создайте новый файл src/event-bus.js и импортируйте библиотеку Vue. Затем экспортируйте его экземпляр.
import Vue from 'vue';
export const EventBus = new Vue();
По сути, вы получаете компонент, который полностью отделен от DOM и остальной части приложения. Все, что в нем существует, – это его методы экземпляра.
Теперь, когда мы создали шину событий, нужно импортировать ее в компоненты приложения и вызвать те же методы, которые мы использовали бы при передаче сообщений между родительскими и дочерними компонентами.
2: Отправка событий
Предположим, у нас есть компонент, который уведомляет приложение о том, сколько раз на него кликнули.
Примечание: В этом примере используется однофайловый компонент, но вы можете использовать любой метод создания компонентов, который захотите.
Вот как можно реализовать это с помощью EventBus.$emit(channel: string, payload1: any, …) в src/components/ClickCountButton.vue:
<template>
<button @click="emitGlobalClickEvent()">{{ clickCount }}</button>
</template>
<script>
import { EventBus } from '@/event-bus';
export default {
data() {
return {
clickCount: 0
}
},
methods: {
emitGlobalClickEvent() {
this.clickCount++;
EventBus.$emit('clicked', this.clickCount);
}
}
}
</script>
Этот код создает кнопку. Каждый клик на эту кнопку отправит событие на канал (clicked) с полезной нагрузкой (clickCount).
Измените файл App.vue, чтобы использовать этот компонент.
<template>
<div id="app">
ClickCountButton></ClickCountButton>
</div>
</template>
<script>
import ClickCountButton from './components/ClickCountButton'
export default {
name: 'App',
components: {
ClickCountButton
}
}
</script>
Далее мы применим EventBus.$on.
3: Получение событий
Теперь любая часть вашего приложения сможет импортировать шину событий и прослушивать выбранный канал с помощью EventBus.$on(channel: string, callback(payload1,…)).
Чтобы активировать это, нужно отредактировать файл App.vue:
<script>
import { EventBus } from './event-bus';
import ClickCountButton from './components/ClickCountButton'
export default {
name: 'App',
components: {
ClickCountButton
}
}
const clickHandler = function(clickCount) {
console.log(`The button has been clicked ${clickCount} times!`)
}
EventBus.$on('clicked', clickHandler);
</script>
Этот код создает прослушиватель событий для канала clicked и выводит в консоль сообщение с указанием количества нажатий кнопки.
Примечание: Если вы хотите прослушивать только первое излучение события, вы можете использовать EventBus.$once(channel: string, callback(payload1,…)).
4: Удаление прослушивателей событий
Чтобы отменить регистрацию обработчика в канале clicked, используйте EventBus.$off(channel: string, callback(payload1,…)).
Давайте вставим эту строку в файл App.vue:
<script>
import { EventBus } from './event-bus';
import ClickCountButton from './components/ClickCountButton'
export default {
name: 'App',
components: {
ClickCountButton
}
}
const clickHandler = function(clickCount) {
console.log(`The button has been clicked ${clickCount} times!`)
}
EventBus.$on('clicked', clickHandler);
EventBus.$off('clicked', clickHandler);
</script>
Предоставляя событие и обратный вызов, EventBus.$off удалит прослушиватель только для этого конкретного обратного вызова.
Примечание: Вы также можете удалить все прослушиватели для определенного события с помощью EventBus.$off(‘clicked’) без аргумента обратного вызова.
Если же вам нужно удалить все прослушиватели из EventBus, независимо от канала, вы можете вызвать EventBus.$off() – вообще без аргументов.
Заключение
В этом руководстве мы использовали мощную встроенную шину событий Vue, чтобы прослушивать событие клика (clicked) и выводить сообщение с указанием количества кликов. Достичь этого нам помогли $emit, .$on и .$off.
Больше информации и упражнений по Vue.js можно найти на тематической странице нашего блога.
Tags: Node.js, Vue.js