vue.js props, slot, slot-props, custom event, mitt

정리

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('이벤트명', (받은데이터)=>{
  		....
      });
    },