[Vue.js] 부모 컴포넌트 ↔ 자식 컴포넌트 데이터 전달

[들어가기 전에]

출처: https://ko.vuejs.org/guide/essentials/component-basics.html

화면 작업을 하다 보면 레고 조립(?)하는 거 같다고 자주 느끼는데요...!ㅋㅋㅋㅋㅋ 레고와 같은 컴포넌트는 Vue에서 중요한 부분 중 하나입니다!

애플리케이션의 구조, 유지보수성, 재사용성, 협업 등 다양한 측면에서 핵심적인 역할을 해요. 저는 팀 단위로 프로젝트를 진행하고 있기 때문에 이러한 역할을 한다는 게 더 와닿는 거 같아요.

 

그런데 컴포넌트 간 데이터 전달은 어떻게 할까요? 바로 props와 emit입니다.

 

부모 컴포넌트 ➡️ 자식 컴포넌트 - props

자식 컴포넌트 ➡️ 부모 컴포넌트 - emit

 

언제 사용하는지는 알았으니 어떻게 사용하는지를 알아볼게요!

[props]

1. 부모 컴포넌트 ➡️ 자식 컴포넌트로 props 전달하기

<!-- ParentComponent.vue -->
<script>
import ChildComponent from './ChildComponent.vue';

export default {
	components: {
    	ChildComponent,
    },
};
</script>

<template>
	<ChildComponent message="Hello from Parent!" />
</template>

2. 자식 컴포넌트에서 props 받기

<!-- ChildComponent.vue -->
<script>
export default {
	props: {
    	message: String,
    },
};
</script>

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

ParentComponent에서 ChildComponent로 message라는 props를 전달하는데 자식 컴포넌트인 ChildComponent에서 props 속성을 사용하여 데이터를 전달받습니다.

[emit]

emit은 자식 컴포넌트가 이벤트를 발생시키고 부모 컴포넌트가 해당 이벤트를 수신할 수 있습니다.

 

1. 자식 컴포넌트에서 이벤트 발생시키기

<!-- ChildComponent.vue -->
<script>
export default {
	methods: {
    	sendMessage() {
	    	this.$emit('message', 'Hello from Child!');        
        },
    },
};
</script>

<template>
	<button @click="sendMessage">메시지 보내기</button>
</template>

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

<!-- ParentComponent.vue -->
<script>
import ChildComponent from './ChildComponent.vue';

export default {
	components: {
    	ChildComponent,
    },
    data() {
    	return {
        	receivedMessage: '',
        };
    },
    methods: {
    	handleMessage(message) {
        	this.receivedMessage = message;
        },
    },
};
</script>

<template>
	<div>
		<ChildComponent @message="handleMessage" />    	
        <p>{{ receivedMessage }}</p>
    </div>
</template>

ChildComponent에서 $emit을 사용하여 message라는 이벤트를 발생시켜 데이터를 받을 수 있습니다.