Vue 2에서 전역 이벤트 버스를 만드는 방법

소개

이벤트 버스/게시-구독 패턴은 애플리케이션의 관련 없는 섹션이 서로 통신하도록 하는 방법입니다.

Vue 구성 요소에서 사용되는 이벤트 시스템은 이벤트 버스/게시-구독 패턴에서 사용할 수 있습니다.

참고: 이 튜토리얼은 Vue 2에만 해당됩니다. Vue 3에서는 권장됩니다.

이 기사에서는 Vue의 강력한 내장 이벤트 버스를 적용합니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

• Node.js를 로컬에 설치했습니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법에 따라 수행할 수 있습니다.
• Vue.js 구성요소 사용에 어느 정도 익숙하면 도움이 될 수 있습니다.

이 튜토리얼은 Node v15.3.0, npm v6.14.9 및 vue v2.6.11에서 확인되었습니다.

1단계 - 프로젝트 설정

이 튜토리얼의 목적을 위해 @vue/cli로 생성된 기본 Vue 프로젝트에서 빌드합니다.

npx @vue/cli create vue-event-bus-example --default

그러면 기본 구성인 Vue 2, babel, eslint로 새 Vue 프로젝트가 구성됩니다.

새로 생성된 프로젝트 디렉토리로 이동합니다.

cd vue-event-bus-example

다른 모듈과 구성 요소에서 사용할 수 있도록 이벤트 버스를 만들고 어딘가로 내보내야 합니다. 먼저 새 파일을 만듭니다. Vue 라이브러리를 가져옵니다. 그런 다음 인스턴스를 내보냅니다.

import Vue from 'vue';
export const EventBus = new Vue();

이 자습서에서는 인스턴스가 변수 EventBus로 설정되었습니다.

기본적으로 얻는 것은 DOM 또는 앱의 나머지 부분에서 완전히 분리된 구성 요소입니다. 존재하는 모든 것은 인스턴스 메소드입니다.

이제 이벤트 버스를 만들었으므로 이를 구성 요소로 가져와서 부모 구성 요소와 자식 구성 요소 간에 메시지를 전달할 때 사용하는 것과 동일한 메서드를 호출해야 합니다.

다음으로 EventBus.$emit()를 적용해 보겠습니다.

2단계 - 이벤트 보내기

누군가 앱을 클릭할 때마다 앱 전체에 앱이 몇 번이나 클릭되었는지 알리는 구성 요소가 있는 시나리오를 생각해 보세요.

참고: 이 예제에서는 여기에서 단일 파일 구성 요소를 사용하지만 원하는 구성 요소 생성 방법을 사용할 수 있습니다.

다음은 EventBus.$emit(channel: string, payload1: any, ...)를 사용하여 구현하는 방법입니다.

<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>

이 코드는 버튼을 생성합니다. 버튼을 클릭하면 페이로드(clickCount)와 함께 채널(clicked)의 이벤트가 전송됩니다.

이 구성 요소를 사용하려면 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,...)).

<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>