상-하위 컴포넌트 간 데이터 전달

MVC 모델 프레임워크에서는 한 화면을 1개의 View로 간주했다.

따라서, 한 화면의 데이터를 해당 화면 영역 어디서든지 호출할 수 있었다.

하지만!!!!!!!!

Vue의 경우 컴포넌트로 화면을 구성함으로 같은 웹 페이지라도 데이터를 공유할 수 없다는 것이 함정......

즉, 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다는 말이다.

그렇다면 데이터를 어떻게 주고 받는 방법이 있을까?

답은 컴포넌트 간 데이터를 주고 받는 방식에 있다.

가장 기본적인 데이터 전달 방법은 아래 그림과 같이 상위(부모)-하위(자식 ) 컴포넌트 간의 데이터 전달 방법이다.

위의 그림을 설명하자면, 아래 표를 살펴보자.

상위 -> 하위	props라는 특별한 속성을 전달
하위 -> 상위	이벤트 전달

그런데 잠깐!

여기서 상위? 하위? 가 무엇인가???

하위 컴포넌트란, 이전 글에 작성한 것처럼 컴포넌트 등록 방법으로 지역 또는 전역 컴포넌트를 등록한 경우를 말한다.

상위 컴포넌트란, 이런 하위 컴포넌트를 등록한 인스턴스를 말한다.

만약, 이벤트와 함께 데이터를 전달하고 싶다면, 이벤트의 두 번째 인자 값으로 전달하거나 이벤트 버스(Event Bus)를 활용하는 방법이 존재한다고 한다.