Vue의 event emit 부모 컴포넌트로 데이터 전달 | Vue3의 emit 옵션 선언

event emit

event emit이란 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달 또는 트리거의 목적으로 이벤트를 내보내는 것이다.

이벤트는 컴포넌트의 emit 메서드를 통해서 발생시킨다.

 

🌈 event 발생 및 수신

  <template>
    <button @click="$emit('someEvent')">버튼</button>
  </template>

자식 컴포넌트에서 내장 함수 $emit('이벤트명')을 통해 이벤트를 발생시킨다.

 

<자식컴포넌트 @some-event="callFunction" />

부모 컴포넌트에서 @이벤트명='메서드명' 를 통해서 이벤트를 수신한다.

 

 

🌈 event 선언

vue3에서는 emits 옵션을 통해 이벤트를 선언할 수 있다.

이벤트를 선언하는건 선택사항(선언안해도 동작한다)

하지만 컴포넌트의 문서화를 위해서는 이벤트 정의하는 것이 좋다.

또한 non-prop(fallthrough) 속성을 활하려면 이벤트를 정의해야한다.

 

선언 방법1. event 문자열 배열 선언

  emits: ['이벤트명'],
  setup(props, {emit}) {
    emit('이벤트명', 파라미터)
  }

선언 방법2. event 객체 문법 선언

emits: { 이벤트: (resunt) => { validation 로직 } }

객체 문법으로 선언하면 validation을 추가할 수 있다.

따로 추가할 베리데이션이 없으면 그냥 null로 설정하면 된다.