[Vue.js] Vue.js CLI 프로젝트 : 부모 자식 간의 데이터 전달 Props

[Vue.js] Vue.js CLI 프로젝트 : 부모 자식 간의 데이터 전달 Props

이전 글

2022.02.12 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vuetify Buttons 버튼 사용하기

2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : 컴포넌트(Component) 등록과 사용

2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트 : Vue 파일 공부하기

2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI 프로젝트, vuetify 설치하기

2022.02.11 - [JS & Framework/vue.js] - [Vue.js] Vue CLI로 시작하기

 

이전 글에 이어서 글을 작성합니다. 이번에 확인할 내용은 부모 컴포넌트에서 데이터를 변경하는 것이 자식 컴포넌트에 전달이 되어 자식 컴포넌트에서도 데이터가 함께 변경되는 것을 보려고 합니다.

 

# 사전 준비 작업

먼저 전역 컴포넌트는 모두 주석 처리하고, 약간의 코드를 수정합니다. 부모 컴포넌트와 자식 컴포넌트의 구분을 쉽게 하기 위해 지난 번 코드에서 배경색을 추가해주었습니다. 

부모 컴포넌트(App.vue)에는 하늘색 skyblue 색상을 부여해주었습니다.

자식 컴포넌트(Home.vue)에는 노란색 yellow 색상을 부여해주었습니다.

자식 컴포넌트를 수정하는 김에 부모 컴포넌트의 변수와 값을 같게 작성합니다.

home.vue 파일 수정 data 의 name 변수 세팅

 

---

# 부모 컴포넌트에서 데이터 전달

 

자식 컴포넌트 태그에 v-bind로 데이터를 보낼 수 있습니다. 

v-bind : 자식에게 보내지는 변수명 = "부모컴포넌트에서 사용되는 변수명"

그리고 name 으로 전송한다고 해서, 부모 컴포넌트의 이름 변경이 자식의 name 변수까지 변경하진 않습니다.

우선 자식 컴포넌트로 보내지는 변수명을 nameOfChild로 수정했습니다. (헷갈림 방지)

 

 

자식 컴포넌트에서도 '데이터를 받겠다.' 라는 것을 선언해주어야 합니다. 이때 사용되는 것이 props property 입니다.

그리고 자식 컴포넌트(Home.vue)를 수정합니다.

Props Property의 문법은 Array 문자열로 받아줍니다. 바인딩되는 변수명칭이 nameChild이면 props : ['nameChild'] 로 쓸 수 있겠죠.

 

잘 전달이 되는지 확인해보겠습니다. 

이름도 같고, 변경 시에도 변경된 같은 이름을 유지하는 것을 확인할 수 있습니다. 

 

---

오늘은 Props Property를 사용해 부모 자식 컴포넌트 간의 데이터 전달을 확인해보았습니다. 도움이 되셨다면 좋아요♥ 꾹! 구독♥ 꾹! 광고♥ 꾹! 은 저에게 큰 힘이 됩니다! 감사합니다!