
[Vue] 컴포넌트의 props 속성을 이용한 데이터 전달 ( 부모 -> 자식 )
FrontEnd/Vue
2021. 10. 9. 18:34
Vue에서 component를 이용해서 데이터를 전달할 때는 props라는 속성을 이용한다. 위와 같이 테스트 뷰 인스턴스와 컴포넌트를 생성한다. 결과는 어떻게 될까? 결과는 아래와 같이 나온다. 컴포넌트를 생성할 때 txt라는 props속성(?)을 선언해주었다. 이제 부모에서 해당 컴포넌트로 데이터를 전달할 때 이 txt로 데이터를 전달하고 컴포넌트에서는 txt로 데이터를 받을 수 있다. 템플릿을 사용할 때 props 속성명으로 데이터를 전달해주는데 : 를 붙이면 데이터를 전달하고, : 를 붙이지 않으면 문자열이 전달된다. 이렇게 props로 전달 된 데이터를 활용할 수도 있다. props는 기본적으로 단방향 바인딩이기 때문에 여기서 주의점은 props로 받은 데이터는 읽기만 가능하다. 하지만 예전에 ..