[vue] props 이벤트 발생과 수신 (상위에서 하위 컴포넌트로 이벤트 전달)

props

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성

 

하위컴포넌트 속성에 먼저 정의를 함. 

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

 

상위컴포넌트의 html 코드에 등록된 child-component 태그에 v-bind 속성을 추가

<child-component v-bind:하위컴포넌트에서 정의한 props 속성이름="상위 컴포넌트의 data속성"> </child-component>

 

상위컴포넌트를 따로 지정하지는 않았는데?

- 컴포넌트를 등록함과 동시에 뷰 인스턴스 자체가 상위 컴포넌트가 되기 때문. 

- 인스턴스에 새로운 컴포넌트를 등록하면 기존에있는 컴포넌트는 상위 컴포넌트(부모)가 되고, 새로 등록된 컴포넌트는 하위(자식) 컴포넌트가 됨.

- 새 컴포넌트를 등록한 인스턴스를 최상위 컴포넌트(Root Component)라고 부름