[Vue.js #3] - 같은 레벨인 경우 컴포넌트 통신방법

컴포넌트 통신방법 - 같은 레벨인 경우

• 바로 같은 레벨로 전달 불가능. 위의 루트 컴포넌트를 거쳐 다시 하위 컴포넌트 (루트 기준)이자 같은 레벨의 컴포넌트 (전달하고자 하는 레벨 기준)야 한다.
• 아래와 같이 이벤트 발생과 프롭스 전달을 동시에 함으로써 구현해야 한다.
  • app-content 컴포넌트의 'methods'이자 이벤트 발생 대상인 pass를 인스턴스(루트)의 deliverNum이라는 '컴포넌트 데이터'로 전달한다.
    실제로는 deliverNum(num)과 같고, data를 처리해주기 위한 methods를 사용한다.
  • num값을 전달받은 인스턴스의 데이터를 app-header 방향으로 props 전달한다. 이때 props속성은 propsdata가 되며, 인스턴스의 num값을 넘겨받는다.

•   <div id="app">
        <app-header v-bind:propsdata="num"></app-header>
        <app-content v-on:pass="deliverNum"></app-content>
    </div>