Vue.js) 연관없는 컴퍼넌트들끼리의 데이터 전송 Vue3.x (이벤트 버스)

개발을 하다보면 부모-자식 뷰의 관계가 아닌 여러 자식 뷰 들 사이에서 데이터를 전송해야하는 일들이 발생한다.

이런경우 Vue2.0에서는 eventBus를 사용했지만

참고:https://v3.vuejs.org/guide/migration/events-api.html#overview

Vue3.x 부터는 Mitt라는 라이브러리를 사용한다.

설치 npm i mitt --save

------------------------
//파일명 mitt.js
import mitt from 'mitt'
const emitter = mitt();

export default {
    install(Vue) {
        Vue.config.globalProperties.emitter = emitter
    }
}

------------------------
//파일명 main.js
import { createApp } from 'vue'
import App from './App.vue'
import miit from "./miit"


createApp(App)
    .use(miit)
    .mount("#app")
    
    
------------------------
one.vue

methods:{
	onReceive(value){
    	console.log(value)
    }
}

created(){
	this.emitter.on('test',this.onReceive); //-> ('key','함수')
    //receiver를 키값 test로 등록
}

------------------------
two.vue

methods:{
	clickBtn(){
	    this.emitter.emit('test','전달 받아랏');
        //test가 키로 등록된 one.vue로 데이터 전달
    }
}

 

위와 같이 코드를 작성한다면

two.vue에서 clickBtn함수를 실행시키면 

one.vue에서 onRecevie함수가 실행되면서 콘솔로 '전달 받아랏' 이 받는다.

 

도움되셨다면 하단의 광고버튼 클릭 부탁드립니다:)