Простая шина событий для общения между компонентами во Vue 2

год назад·2 мин. на чтение

Иногда нужно реализовать быстрое и простое решение для передачи данных между компонентами Vue.js.

Конечно, есть Vuex для централизованного управления состоянием. Таким образом, он может обеспечить приложению единый источник истины. Но для приложения с простой архитектурой достаточно общаться между компонентами с помощью событий. Для этого мы можем создать быстрое решение и реализовать шину событий (event bus). Шину событий позволяет нам отправлять в одном компоненте и слушать это событие в другом. В данном примере будет показано, как это сделать в приложении Vue.js. Благодаря простоте фреймворка Vue он позволяет нам создать механизм обмена событиями с помощью нескольких строк кода.
// eventBus.js

import Vue from "vue";

export const eventBus = new Vue();
Здесь мы создали JavaScript ES6 модуль, который импортирует Vue, создали и экспортировали новый экземпляр Vue. Вот и все. Мы реализовали EventBus и теперь можем начать его использовать.
Здесь у нас есть компонент ComponentA, который импортирует eventBus. Когда вызывается метод emitMethod() компонента, он испускает новое событие с именем EVENT_NAME и передает вместе с ним данные события (payload).
// ComponentA.js

<script>
import { eventBus } from "./eventBus";

export default {
  name: "ComponentA",
  methods: {
    emitMethod() {
      eventBus.$emit("EVENT_NAME", { data: "someData" });
    },
  },
};
</script>

<template>
  <p>ComponentA</p>
</template>
В другом компоненте мы можем зарегистрировать слушателя, который слушает событие EVENT_NAME, передаваемое по шине eventBus. Как только событие появится, мы можем выполнить JavaScript с полученным в качестве аргумента payload.
// ComponentB.js

<script>
import { eventBus } from "./eventBus";

export default {
  name: "ComponentB",
  mounted() {
    eventBus.$on("EVENT_NAME", this.handleEvent);
  },

  beforeUnmount() {
    eventBus.$off("EVENT_NAME", this.handleEvent);
  },
  methods: {
    handleEvent(payload) {
      console.log(payload); // => { data: "someData" }
    },
  },
};
</script>

<template>
  <p>ComponentB</p>
</template>
Вот и все. Вот так просто мы создали решение для передачи событий между различными частями нашего приложения.
// App.js

<script>
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";

export default {
  name: "App",
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

<template>
  <div>
    <ComponentB />
    <ComponentA />
  </div>
</template>
В этом примере мы создали и реализовали механизм передачи данных между слабосвязанными компонентами. Не тратя много времени и усилий на изучение принципов Vuex, Redux или других фреймворков с неизменяемым состоянием. Это удобный способ коммуникации для более простой архитектуры. Которая впоследствии может быть усовершенствована путем внедрения какого-либо централизованного фреймворка управления состояниями по мере роста приложения.

Видео-курс о концепциях JavaScript

год назад·2 мин. на чтение

Рекурсия в JavaScript - Рекурсивные функции

Рекурсия это ситуация когда функция вызывает сама себя.

Каррирование в JavaScript

В этом видео разбираемся как каррировать функции в JavaScript, и пишем функцию для каррирования функций.

Итераторы в JavaScript

В этом выпуске говорим о том как сделать кастомный объект итерируемым с for...of. Итераторы или итерируемые объекты - это объекты, которые можно перебирать в цикле. Иногда бывает полезным создать собственный итератор на свои объекты, которые не являются итерируемыми изначально. Это будет полезно, т.к. удобство работы с такими объектами вырастет. Нужно будет всего лишь написать свой алгоритм перебора и возвращать результат определенного вида.
Чтобы сделать объект итерируемым нужно чтобы объект имел поле Symbol.iterator. Это поле должно быть функцией. Функция должна возвращать объект с полем next. next это функция, которая в свою очередь должна возвращать объект с полями value и done.

Для чего генераторы в JavaScript?

В этом выпуске рассматриваем генераторы в JavaScript. Генераторы в JavaScript (generators) - это особый тип функций, которые могут приостанавливать свое выполнение, выполнять результат, и далее возобновлять свою работу в произвольный момент времени, вернуть еще один результат и т.д. При вызове метода next, генератор возобновляет выполнение и при достижении yield приостанавливается. Результат выполнения функции генератора это ничто иное как итератор. У него есть метод next, который возвращает объект с полями value и done.

Что такое прокси (Proxy) в JavaScript?

Proxy в JavaScript позволяет перехватывать и переопределять операции над объектом.

Что такое поднятие (hoisting) в JavaScript

Поднятие - это механизм который делает возможным использование функций и переменных до их объявления.

var, let, const в JavaScript

Функции высшего порядка в JavaScript