[Vue CLI] 05. Vue 부모-자식간의 데이터 전달 Props

User.vue라는 파일을 부모라고 하고 

UserDetail.vue라는 파일을 자식이라고 한다면 

 

User.vue파일에서 버튼을 클릭했을 때  변수 name이라는 값을 change 시키는 메서드가 있다면 

자식인 UserDetail에서의 변수 name은 값이 변하지 않는다.

User.vue 파일에서 변수 name에 대한 메서드(정보)를 UserDetail에 전달해 준다면 값이 함께 변할 것이다. 

 

부모가 가지고 있는 데이터를 자식 컴포넌트에게 전달해주는 것  

이것을 Props라고 한다. 

 

<UserDetail :nameOfChild="name"></UserDetail>

: name의 정보를 너(UserDetail)한테 줄게라고 부모 컴포넌트가 자식 컴포넌트에게 말해줌. 

왼쪽(nameOfChild)이 자식에게 선언되는 Props의 변수명. 

오른쪽(name)이 그 변수명에 어떤 값을 넣어줄 거냐에 대한 값.

 

 

 

그럼 자식 컴포넌트에서 부모가 보내준 Props를 받는다. 

 

 

이렇게 부모 컴포넌트에서 썼던 변수명에 대한 정보를 자식 컴포넌트로 넘겨줘서

자식 컴포넌트에서 변수명에 대한 메서드를 한번 더 적어줘야 하는 번거로움을 없앨 수 있다.