[vue] emit 부모 컴포넌트로 이벤트 전달

this.$emit('이벤트 명', childData)

받아올 Component에서는 @emit으로 받아올 event명="현재 컴포넌트에서 사용할 Event 명" 형식으로 선언하고,

emit을 사용하는 자식 Component에서 this.$emit('@에서 작성한 emit 명칭', 현재 컴포넌트에서 전송할 Event나 Data 명) 형식으로 보내줄 수 있다.

사실 이렇게 말로 풀어서 설명하면 헷갈리기 때문에 아래 예제로 살펴보는 편이 낫다.

// 자식 컴포넌트 methods
submitEvent(type: 'right' | 'left' | 'delete') {
   this.$emit(`${type}Submit`, this.selectedIdx)
},
  
  
// template
<p-button
   width="120px"
   primary
   filled
   long-height
   :disabled="submitDisabled"
   @click="submitEvent('right')" // click 했을 때 methods에 선언한 submitEvent() 함수를 호출한다.
>

// 부모 컴포넌트
<sli
   multiForm
   v-model="params"
   :modify-mode="modifyMode"
   :formData="formData"
   :form="form"
   :defaultTabList="defaultTabList"
   :detailTabList="detailTabList"
   :selectedIdx="selectedIdx"
   :right-button-text="`${modifyMode ? '수정' : '등록'}하기`"
   @rightSubmit="dealRegister" // @emit으로 받아올 event명 = "현재 컴포넌트에서 사용할 Event 명" 아래에는 dealRegister 함수를 선언하여 호출시킨다.
   @input="checkCategory"
/>

하위 컴포넌트에서 submitEvent() 메서드가 실행되면 ${type}Submit 라는 이벤트가 발생되고, 이를 상위 컴포넌트에 이벤트를 받아 dealRegister 메서드를 실행하는 코드이다.