Mitt는 작고 빠른 JavaScript 이미터(emitter) 라이브러리입니다.
브라우저와 Node.js 환경 모두에서 작동하도록 설계되었으며 이벤트를 내보내고 처리하기 위한 간단하고 직관적인 인터페이스를 제공합니다.
Mitt를 사용하면 사용자 정의 이벤트를 생성하고, 이벤트 핸들러를 연결하여 이러한 이벤트를 수신하고, 무언가 발생했음을 코드의 다른 부분에 알리고 싶을 때마다 이러한 이벤트를 트리거할 수 있습니다.
※ emitter란?
코드의 다른 부분에 알림을 보낼 수 있는 소프트웨어 디자인 패턴입니다.
# 설치
npm
npm install --save mitt
yarn
yarn add mitt
# 등록
전역 플러그인으로 설치
import Vue from 'vue'
import mitt from 'mitt'
const emitter = mitt()
Vue.prototype.$emitter = emitter이후 this.$emitter로 Vue 구성 요소에서 사용할 수 있습니다.
app.config.globalProperties.$emitter = emitter 및 Vue.prototype.$emitter = emitter는 Vue.js 애플리케이션에서 이미터 객체를 전역적으로 사용할 수 있도록 하는 방법입니다.
app.config.globalProperties.emitter = emitter는 emitter를 Vue.js 인스턴스의 전역 속성으로 설정하므로 구성 요소에서 this.$emitter를 통해 액세스할 수 있습니다.
Vue.prototype.$emitter = emitter는 emitter를 Vue.js 프로토타입의 속성으로 설정하므로 컴포넌트에서 this.$emitter를 통해 액세스할 수 있습니다.
이것은 Vue.js 인스턴스에 새 속성을 추가하는 Vue.js 플러그인의 일반적인 규칙입니다.
둘 다 사용 가능하지만 vue를 사용한다면 후자인 Vue.prototype.$emitter = emitter를 사용하는 것이 좋습니다.
# 사용 방법
송신(데이터나 요청을 보내는)측 컴포넌트
this.$emitter.emit('이벤트이름', '전달할데이터')※ 데이터를 전달할 필요가 없다면 전달할 데이터는 생략해도 무관
수신(데이터나 요청을 받는)측 컴포넌트
mounted() {
this.$emitter.on('이벤트이름', (받아올 데이터) => {
이벤트가 호출되면 실행될 내용 작성
})
},
beforeUnmount() {
this.$emitter.off('이벤트이름')
}
사용 예)
다음은 Vue.js 구성 요소에서 이벤트 처리를 위해 mitt를 사용하는 예입니다.
송신측 컴포넌트(예: ComponentA.vue):
<template>
<div>
<button @click="sendEvent">Send Event</button>
</div>
</template>
<script>
export default {
methods: {
sendEvent() {
this.$emitter.emit('some-event', { data: 'hello' })
},
},
}
</script>
수신 측 컴포넌트(예: ComponentB.vue):
<template>
<div>
Event Data: {{ eventData }}
</div>
</template>
<script>
export default {
data() {
return {
eventData: null,
}
},
mounted() {
this.$emitter.on('some-event', eventData => {
this.eventData = eventData
})
},
beforeUnmount() {
this.$emitter.off('some-event')
},
}
</script>위의 예에서 ComponentA의 버튼을 클릭하면 sendEvent 메서드가 실행이 되며, 'some-event'라는 이름으로 { data: 'hello' }라는 데이터를 전송하는 이벤트가 발생합니다.
ComponentB는 'some-event' 이벤트를 수신하고 수신된 이벤트 데이터로 eventData 속성을 업데이트합니다.
# 전역 플러그인으로 설치하기 싫다면
사용 예)
송신측 컴포넌트(예: ComponentA.vue):
<template>
<div>
<button @click="emitEvent">Emit Event</button>
</div>
</template>
<script>
import mitt from "mitt";
export default {
name: "MyComponent",
data() {
return {
$emitter: mitt()
};
},
methods: {
emitEvent() {
this.$emitter.emit("my-event", { message: "Hello World!" });
}
}
};
</script>
수신 측 컴포넌트(예: ComponentB.vue):
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
import mitt from "mitt";
export default {
name: "AnotherComponent",
data() {
return {
message: "",
$emitter: mitt()
};
},
mounted() {
this.$emitter.on("my-event", event => {
this.message = event.message;
});
},
beforeUnmount() {
this.$emitter.off('my-event')
},
};
</script>
# 수신 측 함수를 실행하고 싶은 경우
송신측 컴포넌트(예: ComponentA.vue):
this.$emitter.emit('refresh-event');
수신 측 컴포넌트(예: ComponentB.vue):
mounted() {
this.$emitter.on('refresh-event', this.refresh)
},
beforeUnmount() {
this.$emitter.off('refresh-event', this.refresh)
},
methods: {
refresh() {
...
}
}