pages/index.vue

<template>
  <div>
    <Hello
      :main-title="mainTitle"
      @update-title="handleUpdateTitle"
    />
  </div>
</template>

<script setup lang="ts">
const mainTitle = ref<string>('안녕하세요.');

function handleUpdateTitle(title: string): void {
  mainTitle.value = title;
}
</script>

components/Hello.vue

<template>
  <div>
    <h1>{{mainTitle}}</h1>
    <button @click="handleClick">Change Title</button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  mainTitle: {
    type: String,
    default: 'No hello'
  }
});

const emit = defineEmits<{
  (e: 'update-title', title: string): void
}>();
// defineEmits(['update-title])로 타입 없이 사용 가능

const mainTitle = ref<string>(props.mainTitle);

watch(() => mainTitle, () => emit('update-title', mainTitle.value));

function handleClick() {
  mainTitle.value += ' 하'
}
</script>

emit

• 자식 컴포넌트에서 부모 컴포넌트로 값을 전달
• props의 반대 개념이라고 생각하면 편함

defineEmits

• emit 변수에 넘길 값들 선언
• 기존 define들과 다르게 ({ })이 아닌 <{ }>( ) 으로 선언 후 즉시실행 함수처럼 괄호를 추가
• 매개변수
  • e: 부모 컴포넌트에서 @를 이용해 받을 이름
  • title: 넘길 값의 type
• 타입 선언 안 하고 싶으면 defineEmits(['update-title'])로도 선언 가능

부모 컴포넌트

• emit 컴포넌트에 @update-title 등의 이벤트 이름으로 작동 함수를 넣어줌
• mainTitle을 업데이트