[Vue] 컴포넌트의 props 속성을 이용한 데이터 전달 ( 부모 -> 자식 )

Vue에서 component를 이용해서 데이터를 전달할 때는 props라는 속성을 이용한다.

위와 같이 테스트 뷰 인스턴스와 컴포넌트를 생성한다.

결과는 어떻게 될까? 결과는 아래와 같이 나온다.

컴포넌트를 생성할 때 txt라는 props속성(?)을 선언해주었다. 이제 부모에서 해당 컴포넌트로 데이터를 전달할 때

이 txt로 데이터를 전달하고 컴포넌트에서는 txt로 데이터를 받을 수 있다.

템플릿을 사용할 때 props 속성명으로 데이터를 전달해주는데 

: 를 붙이면 데이터를 전달하고, : 를 붙이지 않으면 문자열이 전달된다.
이렇게 props로 전달 된 데이터를 활용할 수도 있다. 

props는 기본적으로 단방향 바인딩이기 때문에 여기서 주의점은 props로 받은 데이터는 읽기만 가능하다. 

하지만 예전에 프로젝트를 하면서

props로 받은 데이터를 수정해 axios를 통해 데이터를 보내야 할 일이 있었다.

그럴때는 data에 props데이터를 복사해서 사용이 가능하다. 

 

위와 같이 data에 txtValue라는 데이터를 선언하고 props로 받은 txt데이터를 복사해준뒤 txtValue라는 데이터값을

수정할 수 있다.

 

이렇게 해당 template를 클릭했을 때 해당 template의 메서드를 호출해주면 각 template의 데이터에 접근이 가능하다.

4번째 template를 클릭했을때 받은 props의 데이터를 txtValue에 잘 복사 되었다. 이대로 수정을 하면 된다.