props

오늘은 Vue.JS step 9. 같은 컴포넌트 레벨의 데이터 전달(자식1 -> 자식2)에 대해 포스팅하려고 합니다. 컴포넌트 간의 데이터 전달은 총 2가지가 있습니다. 첫 번째 방법은 서로 컴포넌트끼리 연결되어 event-emit(부모로 전달), props(자식으로 전달)의 형태로 사용되는 데이터 전달 방법이 있고, 두 번째 방법은 서로 관계없는 컴포넌트끼리 데이터를 전달하는 eventBus의 연결 방법이 있습니다. 오늘은 첫번째 방법인 event-emit(부모로 전달), props(자식으로 전달) 방식에 대해 진행하겠습니다. 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달할때는 props를 사용하고, 하위(자식) 컴포넌트에서 상위(부모) 컴포넌트로 데이터를 전달할때는 event-emit..

오늘은 Vue.JS step 7. props 데이터 전달(부모 -> 자식)에 대해 포스팅하려고 합니다. Vue.JS에서는 상위(부모) 컴포넌트에서 선언한 data의 값을 하위(자식) 컴포넌트에서 사용하고자 할 때 단순하게 bind를 하거나 Mustache(이중 중괄호)를 사용하여 data를 이용할 수 없습니다. 위 문제를 해결하기 위해 props라는 속성을 이용합니다. props란 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달할 때 사용되는 전달 방식입니다. v-bind를 사용하여 상위(부모) 컴포넌트의 데이터를 동적으로 바인딩할 수 있습니다. 아래 예제 소스코드를 통해 알아보도록 하겠습니다. props.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다. 위 예제 소스에서 ..