[Vue3] 컴포넌트간 통신하기 vue2의 eventbus, Vue3에서는 mitt (emitter)

부모컴포넌트에서 자식컴포넌트로 이벤트를 보낼 일이 있어 eventbus를 사용하려는데, vue3에서는 사용하지 말라고 되어있어 어떤 방법을 써야하나 찾아봤더니 mitt 이라는걸 다운받아서 emitter 로 선언하여 사용하는 방법이 가장 많았다.

동작방법

1. store에 emitter선언해서 어느 컴포넌트간에 접근할 수 있도록 한다.
2. eventbus와 동일하게 보내는곳에서 emit / 받는 곳에서 on 으로 처리한다.

 

Vue3

1. mitt 다운로드

npm i mitt

 

2. store의 state에 emitter 선언

import mitt from 'mitt'; //mitt 가져오기
export default createStore({
    state: {
        emitter: mitt(), //emitter 선언
    }
});

 

3. 이벤트 보낼 부모 컴포넌트

import { useStore } from "vuex"; //store 가져오기
export default {
    setup() {
        const store = useStore(); //store 선언
        const { emitter } = store.state; //state 안에 있는 emitter 접근

        const showListLayer = () => {
            emitter.emit('send-event', "부모컴포넌트에서 왔습니다.");
        }
        
        return {
	        showListLayer
        }
    }
}

 

4. 이벤트 받을 자식 컴포넌트

import { useStore } from "vuex"; //store 가져오기
export default {
    setup() {
        const store = useStore(); //store 선언
        const { emitter } = store.state; //state 안에 있는 emitter 접근
		
        emitter.on('send-event', (e) => {
            alert(e); //부모컴포넌트에서 보낸 데이터입니다. alert
        })
        
        return {
        }
    }
}

 

Vue2 (vue2에서 내가 일반적으로 했던 방법)

1. utils 폴더에 eventbus.js 라는 파일 만들기

import Vue from "vue";
export const eventBus = new Vue(); //이벤트 태울 버스 생성

 

2. 이벤트 보낼 부모 컴포넌트

import { eventBus } from './utils/eventBus'
export default {
    methods: {
        showListLayer() {
            eventBus.$emit('send-event', "부모컴포넌트에서 왔습니다.");
        }
    }
}

 

3. 이벤트 받을 자식 컴포넌트

import { eventBus } from './utils/eventBus'
export default {
    created() {
        eventBus.$on('send-event', this.getEvent)
    },
    methods: {
    	getEvent(e) {
            alert(e); //부모컴포넌트에서 보낸 데이터입니다. alert
        }
    }
}