vue3 부모->자식 자식->부모 데이터 전달방법

부모에서 자식으로 데이터 전달

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 props를 사용합니다.

ParentComponent.vue

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

const parentMessage = ref('Hello from Parent!');
</script>

ChildComponent.vue

<template>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  message: String
});

console.log(props.message);

</script>

 

자식에서 부모로 데이터 전달

자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하기 위해 emit을 사용합니다.

ChildComponent.vue

<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['updateMessage']);

function sendMessage() {
  emit('updateMessage', 'Hello from Child!');
}
</script>

ParentComponent.vue

<template>
  <div>
    <ChildComponent @updateMessage="receiveMessage" />
    <p>{{ childMessage }}</p>
  </div>
</template>

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

const childMessage = ref('');

function receiveMessage(message) {
  childMessage.value = message;
}
</script>

위 예제에서는 부모 컴포넌트에서 자식 컴포넌트로 메시지를 props를 통해 전달하고,

자식 컴포넌트에서 부모 컴포넌트로 메시지를 emit을 통해 전달합니다. 

props와 emit을 함께 사용하여 부모와 자식 컴포넌트 간의 데이터를 효과적으로 주고받을 수 있습니다.

그러면 :message  @updateMessage 이 두가지의 차이점은 무엇일까 ?

Vue 3에서 @updateMessage와 :message를 사용하는 이유는 각각의 역할이 다르기 때문입니다.

이들은 Vue의 데이터 흐름과 이벤트 시스템을 활용하여 부모와 자식 컴포넌트 간의 데이터를 주고받는 방법입니다.

1. :message (Props 바인딩):
   • :message는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. 여기서 :는 v-bind의 약어로, 부모 컴포넌트의 데이터를 자식 컴포넌트의 props로 바인딩하는 역할을 합니다.
   • 예를 들어, 부모 컴포넌트에서 message라는 데이터를 자식 컴포넌트로 전달하려면 <ChildComponent :message="parentMessage" />와 같이 사용합니다. 이 경우, parentMessage의 값이 자식 컴포넌트의 props로 전달됩니다.
2. @updateMessage (이벤트 리스너):
   • @updateMessage는 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용됩니다. 여기서 @는 v-on의 약어로, 자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌트에서 수신하여 처리하는 역할을 합니다.
   • 자식 컴포넌트에서 this.$emit('updateMessage', data)와 같이 이벤트를 발생시키면, 부모 컴포넌트는 <ChildComponent @updateMessage="handleUpdate" />와 같이 이벤트 리스너를 설정하여 해당 이벤트를 처리할 수 있습니다.

이러한 방식으로 Vue에서는 단방향 데이터 흐름을 유지하면서 컴포넌트 간의 데이터를 효율적으로 주고받을 수 있습니다.