Vue script setup에서 부모, 자식 컴포넌트 데이터 주고 받기 (defineProps, defineEmits)

defineProps와 defineEmits는 script setup 내에서만 사용할 수 있으며

import할 필요 없이 script setup이 처리될 때 컴파일 된다.

개념 (props, emits 동일)

• vue는 단방향 data binding directive를 사용하는 것을 권장하는데, 단반향 data binding을 구현하기 위해 defineProps, defineEmits를 사용한다.
• defineProps는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용한다. (부모 -> 자식)
• defineEmits는 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용한다. (자식 -> 부모)
• defineProps, defineEmits을 사용하는 변수이름은 CamelCase, PascalCase가 아닌 kebab-case를 사용하는 것을 권장한다.

사용예시

부모 컴포넌트

<template>
	<div>
    	<p>나는 부모 컴포넌트</p>
        <ChildrenComponent @children-message="childrenMessage" />
    </div>
</template>

<script setup>
	import ChildrenComponent from "./ChildrenComponent.vue";
    
    const childrenMessage = (data) => {
    	console.log("자식이 준 메세지", data); // 부모 컴포넌트 Hi
    };

</script>

자식 컴포넌트

<template>
	<div>
    	<p>나는 자식 컴포넌트</p>
        <button @click="messageRelay">누르면 부모 컴포넌트에게 메세지 전달</button>
    </div>
</template>

<script setup>
	import { defineEmits } from "vue";
    
    const emit = defineEmits(["childrenMessage"]);
    
    const messageRelay = () => {
    	emit("children-message", "부모 컴포넌트 Hi")
    }
    
</script>