События  в vue. Глобальная шина событий.
  • 643

События в vue и применение глобальной шины событий Event Bus для коммуникации между компонентами.

Автор: admin | 10 мая (Пт.) 2019г. в 22ч.21м.

Зачем нужны события.

Передача данных от родительского компонента к дочернему может происходить с помощью props , которые позволяют передавать параметры в компонент. Но что делать, если нужно передать какие-то данные не в дочерний компонент, а в отдельный не связанный компонент? Для этого и пригодится такой функционал, как события. С помощью событий мы можем не просто передавать данные, а передавать те данные, которые нам нужно в определенный момент работы программы, и принимать эти данные там, где надо в vue js.

Пример использования events и Event Bus.

Например, есть два независимых компонента - кнопка "поставить лайк" и всплывающее окно для вывода сообщений на сайте. Нам нужно, чтобы когда пользователь ставит лайк, появлялось сообщение с текстом благодарности и количеством лайков. Данную задачу можно решить с помощью событий в связке с глобальной шиной событий Event Bus. Что такое глобальная шина событий? Это по сути экземпляр класса vue, который будет использован исключительно для работы с событиями. Создадим такой объект.
//Глобальная шина событий
Vue.prototype.$eventBus = new Vue(); // 1способ

const eventBus = new Vue(); // 2 способ​
Я продемонстрировал два варианта создания Event Bus.

Первый вариант позволяет нам зарегестрировать объект Vue в прототипе, что позволяет ограничить область видимости шины событий только фреймворком vue (что нас вполне устраивает).

Второй вариант - это хранение Event Bus в глобальной области видимости. Такой вариант тоже имеет право на жизнь. Выбирайте тот, который нужен и подходит для рещения вашей задачи.

Варианты вызова и привязки событий с использованием глобальной шины событий внутри объекта vue:
this.$eventBus.$emit('event-name');
this.$eventBus.$on('event-name', hendler());

// Или 

eventBus.$emit('event-name');
eventBus.$on('event-name', hendler());​
Таким образом можно передавать данные от  одного компонента к другому, при чем абсолютно не зависимых компонентов vue.

Вернемся к нашему примеру с кнопкой лайков и всплывающим сообщением. Допустим есть такая структура html:
<div id="message">
    <alert-message></alert-message>
</div>

<div id="like">
    <like-button></like-button>
</div>​
Теперь создадим два независимых экземпляра vue - один для сообщений, другой для лайков.
//Глобальная шина событий
Vue.prototype.$eventBus = new Vue();

//объект 1
new Vue({
  el: '#message',
});

//объект 2
new Vue({
  el: '#like',
});​
Опишем структуру like-button компонента и его функционал (упращенно):
 Vue.component('like-button', {
    data: function() {
        return {
            likeCount: 0
        }
    },
    props: {},
    methods: {
            clickLike()
            {
                this.likeCount += 1;
                this.$eventBus.$emit('click-like', this.likeCount);
            }
        }

    template: `
    <div>
        <button @click.prevent="clickLike()"><span>{{likeCount}}</span></button>
    </div>

    `
 });​
При клике на кнопку сробатывает метод likeCount, который увеличивает число лайков на еденицу и далее объявляется событие, в которое передается количество лайков, актуальных на данный момент.

Теперь рассмотрим как устроен компонент вывода сообщений на сайте:
Vue.component('alert-message', {
    data: function() {
        return {
              message: ""
        }
    },
    created() {
        this.$eventBus.$on('click-like', this.makeMessage)
    },

    beforeDestroy(){
        this.$eventBus.$off('click-like');
    },

    methods:{
        makeMessage: function (count) {
           this.message = "Спасибо. Теперь количество лайков - " + count;
        },
        close: function () {
           this.message = "";
        },
    },

    template: `
    <div class="alert-style" v-if="message.length > 0">
        <span>{{message}}</span>
        <span class="close" @click:prevent="close()">X</span>
    </div>

    `
 });​
Тут компонент подписан на нужное событие в момент создания компонента. Указан метод для обработки события. Когда данное событие вызывается в компоненте like-button, то оно тут же будет обработано в компоненте alert-message. Такое возможно благодаря тому, что тут использовалась глобальная шина событий.

Приветствую!

Меня зовут Сергей. Я - автор этого блога.

Если Вам был полезен материал на моем сайте, поддержите пожалуйста мой проект, чтобы о нем узнали другие люди - кликните plizz :) на иконку в соц. сети, чтобы поделиться материалом с другими.