상-하위 컴포넌트의 관계

• 각각의 컴포넌트는 고유한 유효 범위를 갖고 있기 때문에 직접 다른 컴포넌트의 값을 참조할 수 없다.
  따라서 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 한다.
• 부모-자식 컴포넌트간의 데이터 전달 방법이다.

전달방법

상위->하위 :props 전달

하위->상위 :이벤트 전달

출처:https://brainmemory.tistory.com/47

 

*props 속성

• 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성 
• props 사용을 위해선
  -하위 컴포넌트의 속성에 정의
  -상위 컴포넌트 태그에 v-bind 속성을 추가 

부모와 자식 tag

자식 component 생성

부모 속성 

하위에서 상위로 이벤트 전달하기

• 이벤트 발생과 수신은 $emit()과 v-on 속성을 이용한다.

이벤트방출