Vue - mitt 라이브러리 사용하기

mitt 라이브러리

• 먼 곳에 떨어진 컴포넌트에 데이터를 전송하려고 할 때 이 mitt이라는 외부 라이브러리를 사용하면 쉽게 전송이 가능하다.

 

mitt 설치하기

• 미리보기하던 서버 종료 후 새 터미널 오픈하여 명령어 실행

npm install mitt

또는

yarn add mitt

 

mitt 라이브러리 셋팅하기

• main.js에서 셋팅한다.
• app.config.globalProperties 란 모든 컴포넌트에서 사용할 수 있는 변수같은 것을 등록할 수 있게 도와주는 일종의 object이다. 글로벌 변수 보관함이라고 생각하면 된다.
• 이 곳에 자주 쓰는 axios 를 보관하면 편리하다. import하지 않아도 axios.get을 할 수 있다. (다만 this.axios.get 이라고 해야함)

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; // 보관함에 { emitter : emiiter } 추가

app.mount('#app')

• app.config.globalProperties에 emitter라는 항목을 추가한 것이다. (emitter는 mitt 라이브러리에서 제공하는 함수)

 

mitt 사용법

• 데이터를 전송하려는 컴포넌트에서 작성한다.

export default {
	methods: {
 		this.emitter.emit('이벤트명', '데이터')
 	},
}

 

• 데이터를 수신하려는 컴포넌트의 mounte() 안에 작성한다.

export default {
	mounted() {
    	this.emitter.on('이벤트명', (a)=>{
          데이터 수신했을 때 실행되는 코드
          consolg.log(a); //전송할 때 들어있던 데이터
        })
    },
}