7. 같은 레벨의 컴포넌트 통신 방법

#같은 레벨의 컴포넌트 통신 방법

컴포넌트의 통신방법은 기본적으로 props와 이벤트로

위에서 아래로 아래에서 위로 데이터를 교환하는 방식인데

같은 레벨에서의 컴포넌트간 데이터를 교환하고 싶을때에는 어떻게 해야할까...?

 

바로 상위 컴포넌트로 이벤트를 통해 데이터를 보내주고,

상위 컴포넌트에서 받은 데이터를 props로 원하는 컴포넌트에 보내주는 방식을 사용한다.

 

$emit() : 첫번째 인자는 부모 컴포넌트에서 자식 컴포넌트를 호출할때 적을 메서드 이름,

두번째 인자는 해당 메서드에 들어갈 값으로 지정한다.

 

순서를 한번 살펴보자!

props : <app-content>에서 v-on:pass="deliverNum" 를 이용해 하위컴포넌트의 이벤트를 받아

상위컴포넌트의 메서드를 수행하여준다.

이벤트 : 상위컴포넌트에서 수행된 메서드(deliverNum)에 의해<Root> data에 num은

10의 값을 전달받게되었고, <app-header>에서 num값을

v-bind:propsdata(프롭스 속성이름)="num(상위 컴포넌트의 데이터 이름)" 을 통해

값을 전달받는다.

 

클릭 전의 <Root>(상위컴포넌트)의 모습

클리 이후의 <Root>(상위컴포넌트)의 모습

이미지를 보면 알수있듯이 같은 레벨의 컴포넌트에게 값을 전달하기 위해

상위 컴포넌트에 데이터를 전달하는 모습이다.

AppContent에서 같은 레벨의 컴포넌트인 AppHeader로 데이터가 잘 전달된 모습을 볼 수 있다.