📚 Reference

• 공식 문서 1
• 공식 문서 2
• 참고 자료 1

📜 Chapter

defineModel()

defineProps()

defineEmits()

• defineEmits()
• script setup에서 사용
• Vue 3의 <script setup> 구문에서 컴포넌트의 인터페이스(Props와 Emits)를 정의하는 데 사용되는 컴파일러 매크로(Compiler Macros)이다.
• 함수처럼 보이지만, 실제로는 런타임에 호출되는 일반 함수가 아니라, Vue 컴파일러가 <script setup>을 처리할 때 사용하는 빌드 시간 전용 선언이다.
• defineEmits는 컴포넌트가 부모 컴포넌트로 발생시킬 수 있는 이벤트(Emits)를 선언한다.

사용법

<script setup>
// 런타임 유효성 검사를 위한 배열 또는 객체 전달 (JavaScript 방식)
const emit = defineEmits(['update', 'submit']);

// 이벤트 발생 시 emit 함수 사용
const handleClick = () => {
  // 'submit' 이벤트를 발생시키고 인자(페이로드)를 전달
  emit('submit', { data: 'payload' });
};
</script>

• 타입 기반 선언 (TypeScript 권장 방식)
  • TypeScript 환경에서는 이벤트 이름과 함께 이벤트가 전달하는 페이로드(인자)의 타입을 명확히 정의한다.

<script setup lang="ts">
// 💡 defineEmits 뒤에 제네릭으로 이벤트 시그니처를 정의
const emit = defineEmits<{
  // 이벤트 이름: (인자1의 타입, 인자2의 타입, ...)
  (e: 'update', value: string): void;
  (e: 'submit', payload: { data: string }): void;
}>();

// emit 함수를 호출할 때 TypeScript가 인자 타입을 검사해 줍니다.
emit('update', 'new value');
</script>