Vue.js mitt

어떤 컴포넌트에서 컴포넌트로 데이터를 전송할때 컴포넌트 사이의 거리가 길어져서 코드도 길어질 경우에 mitt라이브러리를 따로 설치해서 사용하면 편리하다.

yarn add 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') 

app.config.globalProperties.emitter부분이 모든 컴포넌트에서 사용할 수 있는 변수 등을 등록가능하게 도와주는 object자료이다.
글러벌 변수 보관함이라고 보면 된다.

이런 곳에 axios같은 자주쓰는것을 보관하면 편리하게 import없이 사용이 가능하다.
다만 this.axios.get이런식으로 사용한다.

mitt 사용법

데이터를 보내는 곳에서

this.emitter.emit('이벤트작명', '데이터')

데이터가 필요한 곳에서

this.emitter.on('이벤트작명', (a) => {
  데이터수신시 실행하는 코드
  a는 출력시 데이터가 나온다.
}

보통 수신하는 코드는 mounted()안에 적는다.
js에서 이벤트리스너와 사용법이 비슷하게 사용가능하다.