[Vue3] EventBus

Vue2에서 사용하던 $on $off $once를 Vue3에서는 사용하지 못한다

 

EventBus는  component 간에 이벤트를 통신 할때 사용한다. 기본적으로 상위 컴포넌트를 거쳐야만 하위 컴포넌트에 이벤트를 전달 할수 있는 구조 인데. (props 트롤링)

 

props를 거치지 않고 사용할 수 있는 방법이 EventBus이다. 형제 컴포넌트 간에 통신이 가능 하지만 전역으로 등록 하는 것이다.

 

vuex 라는 것이 대규모 프로젝트에서 적합 하고 EventBus는 적합하지 않다고 하지만 

 

우선 배워본다

 

EventBus는 게시 / 구독 패턴을 가진다. 게시자가 이벤트를 게시 할 뿐 구독자가 어떤 것인지 파악하지 않고 구독자가 필요시 사용하여 서비스를 받도록 하는 패턴이다. (비동기 이고 단방향 통신이 될것이다.)

 

1. emit: 이벤트와 데이터를 송신한다(보내기)

2. on : 이벤트와 데이터를 수신한다(받기)

 

npm install --save mitt

 

main.ts (Vue3 compisition API)

이벤트 버스를 사용 할 것이라고 선언

const app = createApp(App)

import mitt from 'mitt'

const emitter = mitt()

app.config.globalProperties.emitter = emitter

 

 

App.vue (게시)  : 메소드 내부에 EventBus를 emit를 한다.

import { getCurrentInstance } from 'vue'

const app = getCurrentInstance()

const bus = app?.appContext.config.globalProperties.emitter

 

const emitFunction = (val: number) =>{  

console.log('[emitFunction1] param =',val)

val = val + 1

console.log("[emitFunction2] param +1 = ", val)

bus.emit("emitFunction",val) /* 어떤 행위를 전달을 하면 */

}

 

//외부에서 호출

emitFunction(100)

 

GrandChild.vue  : 메소드의 조작된 값을 수신 한다.

const app = getCurrentInstance()

const bus = app?.appContext.config.globalProperties.emitter

bus.on("emitFunction", (msg) => {console.log('수신된 값', msg)})

 

 

우선, 어떤 메소드를 생성 해서 특정 값을 return을 할 때, 그 값을 다른 곳에서 이용을 하려고 할때 부분적으로 사용할 수 있을 것 같다.