Vue(version 3) 주요 기능 정리(v-on) #8

주요 기능 정리 #7에서는 v-on을 사용했을 경우에 대해서 알아봤다.
이번 주제는 v-on에서 custom 컴포넌트에서 사용하는 법을 소개해보고자 한다.

<template>

  <custom-component @on-custom-event="doThat" @on-custom-event2="doThat2"></custom-component>

</template>

<script setup lang="ts">

import CustomComponent from './Sample.vue'

const doThat = () => {

  // 자식 이벤트

}

const doThat2 = (text: string) => {

  // 자식 이벤트

}

</script>

/// './Sample.vue' 파일

<template>

  <button @click.stop.prevent="doChildThat">

  <button @click.stop.prevent="doChildThat2">

</template>

<script setup lang="ts">

const doChildThat = () => {

  emit('on-custom-event')

}

const doChildThat2 = () => {

  emit('on-custom-event2', '테스트')

}

const emit = defineEmits<{

  (e: 'on-custom-event'): void,

  (e: 'on-custom-event2', text: string): void,

}>()

</script>

 하단의 <template> 부터는 다른 파일이라고 생각하시면 됩니다. 그 다른 파일을 부모 컴포넌트에서 import 로 파일을 불러와서 사용하는 형식이다.
 자식의 어떠한 이벤트2가지를 부모에서 받아서 사용하는 방식이다. 이 방법의 핵심은 defineEmits 라는 기능이며, 이 부분에 부모에 어떤 이벤트를 넘겨줄 것인지 define하는 방식입니다. on-custom-event2 에서 보는 것처럼 argument를 넘겨줄 수도 있고, 리턴을 받을 수도 있는 형태이다.