📌 mitt 라이브러리 설치
FilterBox.vue -> Container.vue -> App.vue 까지 데이터를 전송시켜보자
단순히 바로 위 상위 컴포넌트로 데이터를 전송할 때는 custom event 를 쓰면 됐었다.
상위상위 컴포넌트로 데이터로 전송시키고 싶을 때는 mitt 라이브러리를 이용할 수 있다.
1. 터미널을 열고 mitt 라이브러리 설치한다.
npm install mitt
2. main.js 에 mitt 라이브러리 등록
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.config.globalProperties : 글로벌한 변수보관함
app.mount('#app')
📌 app.config.globalProperties
app.config.globalProperties 은 글로벌한 변수보관함. 모든 컴포넌트들이 갖다 쓸 수 있다.
모든 컴포넌트에서 emitter 를 사용 시 mitt 라는 라이브러리가 동작한다고 생각하면 된다.
자주 쓰는 라이브러리가 있으면 app.config.globalProperties 여기다가 등록하면 된다.
ex) app.config.globalProperties.axios= axios;
이제 vue 파일에서 import axios 해욜 필요 없이 this.axios 로 사용 가능하다.
⚡ this.axios 로 써야함을 유의
mitt 로 데이터 전송하기
1. this.emitter.emit() 로 데이터 발사하고
this.emitter.emit('작명', '데이터')
2. 수신하기
수신하고 싶은 컴포넌트 > mounted() {} 안에 this.emitter.on() 으로 수신하면 된다.
mounted 안에 작성하는 것이 관습이다.
this.emitter.on('작명', (data) ={}) // data : 이벤트 발사 할 때 들어있던 데이터
실습을 해보자
하위 컴포넌트에서 [버튼] 을 누르면 fire 함수를 통해 상위 컴포넌트로 데이터를 전송시킨다.
// FilterBox.vue (하위 컴포넌트)
// template 영역
<button @click="fire">버튼</button>
// script 영역
methods : {
fire () {
// 이벤트 발사
this.emitter.emit('test', '데이터')
}
}
// App.vue (상위 컴포넌트)
mounted() {
this.emitter.on('test', (data) => {
console.log('data > ', data)
})
}
버튼을 누르면 콘솔로그를 통해 '데이터' 가 잘 전송되었음을 확인할 수 있다.
⚡ emitter 를 너무 많이쓰면 관리하기가 힘들어지니 vuex 를 쓰는 것이 낫다.
'Vue3 > 코딩애플 part3' 카테고리의 다른 글
[Vue/코딩애플/part3] 7. Vuex - store의 state 변경하는 방법(mutations, $store.commit) (0) | 2024.08.05 |
---|---|
[Vue/코딩애플/part3] 6. vuex 설치 (0) | 2024.08.05 |
[Vue/코딩애플/part3] 4. props 대신 slot (0) | 2024.08.05 |
[Vue/코딩애플/part3] 3. tab 만들기 / URL.createObjectURL() (0) | 2024.08.02 |
[Vue/코딩애플/part3] 2. 서버에 ajax 요청하기 (0) | 2024.08.02 |