Vue3 - 떨어진 컴포넌트간에 데이터와 이벤트 주고받는 방법 mitt

 

mitt는 컴포넌트끼리 부모자식간의 관계가 아닌 멀리 떨어져 있어는 컴포넌트 간에도 데이터를 전송할 수 있도록 도와주는 라이브러리입니다.

 

Vue2 시절엔 Event Bus라는것을 사용했었는데, Vue3에서는 mitt 또는 tiny-emitter를 사용합니다.

단 이렇게 컴포넌트끼리 서로 데이터를 주고받다보면 프로젝트가 커지면 커질수록 유지 관리에서 문제가 생기게 되므로, 공식적으로도 권장하는 방식은 아닙니다.

 

이러한 데이터 관리는 Pinia(구. Vuex)를 이용하는것이 좋지만, 상황에 따라서 필요할수도 있으니 필요에 따라 사용하시면 될거 같습니다.

 

 

 

#1. 설치

npm install --save mitt

 

 

 

#2. 등록

  mitt 를 사용하기위해선 main.js 파일을 아래와 같이 수정해주면 됩니다.

import { createApp } from 'vue'
import App from './App.vue'

import mitt from 'mitt'  // <-- 
let emitter = mitt();  // <--
let app = createApp(App);
app.config.globalProperties.emitter = emitter;  // <--

app.mount('#app')

 

 

 

#3. 사용 방법

  3-1. 데이터를 보내는 쪽에서 아래와 같이 작성합니다.

this.emitter.emit('이벤트이름', '전달할데이터')

 

sample.

 

methods: {
    moveToNotice(notice) {
        this.emitter.emit('mittMoveNotice', notice.no);
    }
}

  ※ 데이터를 전달할 필요가 없다면 2번째는 생략가능

 

3-2. 데이터를 받는(실제로 동작 시키고 싶은 곳)쪽에서

  ※ 일반적으로 mounted 내부에 작성

mounted() {
  this.emitter.on('이벤트이름', (받아올 데이터) => {
    이벤트가 호출되면 실행될 내용 작성
  })
},
unmounted() {
  this.emitter.off('이벤트이름')
}

 

sample.

mounted() {
    this.emitter.on('mittMoveNotice', (noticeNo) => {
      this.moveNotice(noticeNo)
    })
},
unmounted() {
    this.emitter.off('mittMoveNotice');
},

  ※ 해당 이벤트의 제거는emitter.off로, 모든 이벤트의 제거는 emitter.all.clear로 사용할 수 있다.

 

 

Mitt GitHub >