Props란?

Props란?

: 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용한다.

(하위 컴포넌트가 상위 컴포넌트의 값을 바로 참조할 수 없다는 의미를 뜻함)

해당 Props 속성을 이용하여 전달할 수 있는 데이터는 객체, 배열 등 유형과 상관없이 모든 것이 전달 가능하다고 한다.

하위 컴포넌트의 Props 속성 정의 방식은 아래와 같다.

Vue.component('child-component',{     props : ['props 속성 이름']  });

따라서 아래와 같이 코드를 작성했다.

아래 코드는 상위 컴포넌트의 message 속성을 하위 컴포넌트에 props로 전달하여 메시지를 출력하는 예제이다.

<코드 작성 순서>

1. new Vue()로 인스턴스 생성

2. Vue.component()를 이용하여 'child-component'라는 하위 컴포넌트 생성

3. child-component에 props 속성을 정의

<코드 작성 순서>

1. child-component 등록

2. v-bind:Props 속성 이름="상위 컴포넌트의 데이터 속성" 

이때 주의할 점!!! 은 아래 표 참고.

주의

js에서 props 변수 명명은 카멜 기법으로 하면, html에서의 접근은 케밥 기법(-)으로 작성해야함

->  child-component 컴포넌트를 등록함과 동시에 뷰 인스턴스 자체가 상위 컴포넌트가 되어 하위 컴포넌트인 child-component에 props로 데이터를 전달한 결과이다.

그 결과, 작성한 위의 코드를 Chrome으로 띄우면 아래와 같은 문구가 화면에 표시된다.