Зачем и как создавать шину событий в Vuejs 3

Вы когда-нибудь использовали шину событий в Vue 2 и не знаете, как воссоздать ее в Vue 3?

Поскольку я работаю над 2.0 версией пользовательского интерфейса своего продукта (которая выйдет в мае), я публикую некоторые технические приемы, которые я узнал, перенося свое приложение с Vuejs 2 на Vuejs 3.

В текущей версии фронтенд-приложения Inspector используется глобальная шина событий. Она необходима для того, чтобы корневой компонент приложения (App.vue) знал о некоторых определенных событиях, запускаемых внутри цепочки компонентов.

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

Взаимодействие компонентов Vuejs

В Vuejs каждый компонент отвечает за отрисовку части пользовательского интерфейса, с которой взаимодействуют пользователи. Иногда компоненты являются самодостаточными. Они могут получать данные непосредственно из API бэкенда. Чаще компонент является дочерней частью более структурированного представления, которое должно передавать данные дочерним компонентам для отображения определенной части пользовательского интерфейса.

Компоненты могут передавать реквизиты своим родителям. Реквизиты - это данные, которые нужны компоненту от родителя для его работы.

В приведенном ниже примере компоненту нужен объект пользователя, чтобы отобразить его имя с различными стилями в зависимости от его роли.

<template>
    <span :class="{'text-danger': user.is_admin}">
        {{user.first_name}} {{user.last_name}}
    </span>
</template>

<script>
export default {
    props: {
        user: {
           type: Object,
           required: true
        }
    }
}
</script>

Продолжение в оригинальной статье → https://inspector.dev/why-and-how-to-create-an-event-bus-in-vuejs-3