정리
props, slot, slot-props
- props, slot: 상위 컴포넌트의 데이터를 하위컴포넌트에서 사용, 단 데이터 변경 불가
- 하위컴포넌트에서 커스텀 이벤트를 이용해서 데이터 변경
- slot-props: 하위 컴포넌트의 데이터를 상위컴포넌트에서 사용
custom event
- 한 단계 컴포넌트 차이에서 주로 props 데이터를 변경할 때 사용
- $emit, $event
-
<textarea @input="$emit('postData', $event.target.value)" ....
mitt
- 여러단계 컴포넌트를 거슬러 이벤트 전달 시 mitt라이브러리 설치 후 사용
- mitt설치
-
npm install mitt
- main.js 수정
-
import { createApp } from 'vue' import App from './App.vue' import mitt from 'mitt' // 모든 컴포넌트가 mitt 사용가능 let emitter = mitt(); let app = createApp(App) app.config.globalProperties.emitter = emitter; // createApp(App).mount('#app') app.mount('#app')
- this.emitter.emit(): 이벤트 보낼때
-
함수(데이터) { this.emitter.emit('이벤트명', 데이터) }
- this.emitter.on(): 이벤트 받을때, 주로 mounter() hook에서 구현
-
mounted() { this.emitter.on('이벤트명', (받은데이터)=>{ .... }); },
'컴&프로그래밍 > Vue.js' 카테고리의 다른 글
Vuex (0) | 2021.10.09 |
---|---|
vue.js 데이터바인딩 (0) | 2021.10.07 |
Vue Lifecycle, Lifecycle Hooks (0) | 2021.10.04 |