Vue 시작하기 ④

 

이번 포스팅에선 vue의 자식 컴포넌트와 부모 컴포넌트를 이용하여 재사용성을 높이는 방법에 대해 알아보자

 

 

 

 

컴포넌트를 정의하기

동일한 템플렛을 계속하여 만들지 않아도, 컴포넌트를 통해 언제든지 불러서

재사용을 할 수 있다

 

위의 코드에선

my-component와 your-component를 정의하였다

my-component에선 div 박스를 생성하고,

your-component에서도 똑같이 div 박스를 생성하지만 부모(app)로부터 greet이라는 property를 받는다

 

위의 부모 요소를 보면 

your-component v-bind:greet = " '안녕하세요' "라고 greet에 property를 전달해주었다.

 

 

 

 

위의 코드에 대한 결과물이다

html 영역에 컴포넌트만 추가했을 뿐인데, 직접 html에 작성한 것처럼 요소가 잘 나와있다 (css style은 따로 추가함)

이렇게 중복되는 요소를 계속해서 사용하는 경우, 컴포넌트로 재사용성을 높일 수 있다

 

 

 

 

자식 컴포넌트 (friends-component)에서 props를 리스트에 출력할 friends로 받을 경우,

부모 컴포넌트 (app)에게 property를 요청한다.

부모 컴포넌트의 v-bind:friends는 friends를 가리키고 있으며,

data안에 있는 friends에는 ["김구라", "해골", "원숭이"]라는 배열이 존재한다.

 

 

부모 컴포넌트의 property를 받아와서 리스트로 출력하니

배열에 들어있던 값이 리스트 아이템으로 잘 출력되었다

 

 

 

 

 

이번엔 재사용이 가능한 컴포넌트를 전역으로 정의하기 위해

Vue.component("컴포넌트 이름", {컴포넌트 데이터}); 형식으로 입력했다

 

전역 컴포넌트의 경우, 기존에 사용했던 data:{} 형식을 사용하지 못한다.

무조건 data(){} 함수로 사용하자

 

* data(){}는 data:function(){}를 줄임 표현이다. 

 

data 함수를 호출하면 {msg:"div입니다."}라는 key와 vale를 가진 오브젝트를 리턴해준다.

그리고 이 오브젝트가 모델로 사용이 된다.

 

위 코드의 출력된 결과물이다

 

 

 

 

부모 컴포넌트는 자식 컴포넌트에게 fortune이라는 property를 전달한다.

위의 코드에선 property가 input에서 받는 텍스트에 따라 값이 계속 변경되는 경우인데,

부모에서 어떤 모델을 자식에게 propety로 전달할 때 전달했던 모델이 업데이트되면

자식 컴포넌트에게 업데이트된 (변경된) 값을 새롭게 전달해준다.

 

부모 컴포넌트와 자식 컴포넌트 사이에 property를 주고받는 과정은

 

 

 

1. props를 요청하는 방법

 

자식 컴포넌트에 props:["fortune"]을 작성하여

fortune이라는 이름의 props를 받을 준비를 한다.

 

2. props를 전달하는 방법

 

<자식 컴포넌트명 v-bind:프로퍼티명="값">,

위의 코드에선 <fortune-component v-bind:fortune="fortune">를 통해

부모 컴포넌트는 자식 컴포넌트에게 props를 넘겨준다

 

(위의 이미지에선 data를 거치지 않고 바로 고정된 값을 주었다)

 

 

 

위의 코드를 실행할 경우,

가장 초기값으로 설정되어있는 props인 "만수무강!"이 출력된다.

그 이후에 input 텍스트를 변경하면 자식 컴포넌트에 전달되는 props가 변경되어

변경이 될 때마다 부모 컴포넌트에서 자식 컴포넌트에게 props를 새롭게 전달해준다.

 

 

 

 

props 이름이 fortuneToday라는 카멜 케이스로 작성되어 있을 경우,

케밥 케이스 kebab case (fortune-today)로 props를 전달해야 한다

 

그래서 카멜 케이스로 작성하여 케밥 케이스로 변경하는 것보단,

아예 소문자로만 작성(fortunetoday)하는 방법이 더 편할 수 있다.

 

 

 

 

만약 props에서 카멜 케이스로 작성하고 부모의 v-bind를 똑같이 카멜 케이스로 작성하면?

props가 전달되지 않으며, 콘솔 창을 확인했을 때 카멜 케이스로 작성된 fortuneToday 대신

케밥 케이스로 작성된 fortune-toda로 작성하라고 vue에서 알려준다.

 

 

카멜 케이스에서 케밥 케이스로 변경하면

결과가 잘 출력되는 것을 확인 가능하다 :)