멀리 있는 컴포넌트간 데이터전송 mitt

App.vue 밑에 Container.vue 밑에 FilterBox.vue에서 고른 필터를 Container.vue로 전달해서 해당 필터를 Container에 있는 이미지에 씌울 수 있는데, 필터도 중요한 data이기에 App.vue로 전달해서 data를 보관하려한다.

이럴 때 mitt라는 라이브러리를 사용한다.

먼저,

yarn add mitt

설치해주고, 셋팅을 main.js에

//main.js
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;

app.mount('#app')

이렇게 셋팅해준다. config.globalProperties는 글로벌한 변수보관함이다. 이러면 emitter를 this.emitter로 가져다 쓸 수 있다. 버튼을 만들고 클릭 시 fire함수가 실행되게 하며,

<button @click="fire">버튼</button>

methods: {
        fire() {
            this.emitter.emit('작명', '데이터')
        },
}

이런 식으로, this.emitter.emit을 이용해서 작명하고 데이터를 보내주면 된다.

 

수신할 땐,

mounted() {
    this.emitter.on('작명', 함수)
}

export default안에 mounted를 열어서 작성해주는게 관습이고, this.emitter.on을 이용해서 누가 작명이란 이벤트를 발사하면 안에 함수를 실행해주세요 가 된다.