Vue.js 커스텀 이벤트 - mitt 라이브러리

1. 커스텀이벤트를 여러번 써야할 경우 유용한 라이브러리 -> mitt 라이브러리
    상위의 상위의 상위로 커스텀 이벤트를 전송해야 할 경우 등
    mitt는 emitter의 약자

2. mitt 환경 설정
    main.js에서 mitt 라이브러리 추가

import mitt from 'mitt'

let emitter = mitt();
let app = createApp(App);
app.config.globalProperties.emitter = emitter;

app.mount('#app');

 

3. mitt 사용법

// 송신
export default {
  name: 'MyComponent',
  methods: {
      fire(){
          this.emitter.emit('');
      }
  },
};

// 수신
export default {
  name: 'MyComponent',
  mounted(){
    this.emitter.on('test', (a)=> {
      console.log(a);
    });
  }
};