Vue3 부모에서 자식 데이터 주고 받기 - Composition API

Vue는 부모 자식 컴포넌트 간의 데이터를 서로 전달할 수 있습니다.
양방향 데이터 바인딩이 가능한 장점이 있습니다.
 
부모에서 자식으로는 Props 옵션을 이용해서 전달하고,
자식에서 부모는 Emit 이벤트를 이용해서 전달합니다.
 
Props와 이벤트를 이용하면 부모 / 자식 관계에서 데이터를 서로 주고받을 수 있습니다.
 

부모 ➡️ 자식 데이터 전달

1. 부모 컴포넌트에서 데이터 생성

const userName = ref('superman');

2. 자식 컴포넌트로 데이터 전달

<Child :message='userName'></Child>

3. 자식 컴포넌트에서 Props 설정

<template>
   <p>{{ message }}</p>
</template>

<script setup>
import { defineProps, defineEmits } from "vue"

// eslint-disable-next-line no-unused-vars
const props = defineProps(["message"]);
</script>

 

자식 ➡️ 부모 데이터 전달

1. 자식 컴포넌트에서 이벤트 생성 후 호출

const emit = defineEmits(["update"])
emit("update", "batman")

2. 부모 컴포넌트에서 이벤트 수신

<Child :message='userName' @update='update'></Child>

3. 부모 컴포넌트에서 이벤트 처리

function update(message) {
  childName.value = message
}

 

App.vue (부모)

<template>
  <section class="container">
    <h2>{{ childName }}</h2>
    <Child :message='userName' @update='update'></Child>
  </section>
</template>

<script setup>
import { ref } from 'vue';
import Child from '@/Child.vue';

const userName = ref('superman');
const childName = ref('');
function update(message) {
  childName.value = message
}
</script>

Child.vue

<template>
<p>{{ message }}</p>
</template>

<script setup>
import { defineProps, defineEmits } from "vue"

// eslint-disable-next-line no-unused-vars
const props = defineProps(["message"]);
const emit = defineEmits(["update"])

emit("update", "batman")
</script>

<style scoped>

</style>

 
Composition API를 이용해서 부모 자식 데이터 전달하는 방법이였습니다.