Vue.js - 같은 컴포넌트 레벨 간의 통신 방법

app-content의 pass 버튼을 눌렀을 때
같은 컴포넌트 레벨인 app-header로 passNum 값을 전달하고 싶다면?

app-content에서 app-header로 바로 값을 보낼 수 없으므로
$emit을 이용하여 먼저 값을 Root로 보낸다.
그 다음에 Root에서 props을 이용하여 값을 app-header로 내려보낸다.
app-header로 값을 내리기 위해서는 data를 선언해야 한다.

<div id="app">
    <!-- <컴포넌트명 v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></컴포넌트명> -->
    <app-header v-bind:propsdata="num"></app-header>
    <!-- v-on:하위 컴포넌트의 이벤트 이름 = "상위 컴포넌트의 이벤트 이름" -->
    <app-content v-on:pass="deliverNum"></app-content>
</div>

var appHeader = {
      template: '<div>Header</div>',
  	  // Root(인스터스)에서 값을 내려받기 위하여 props를 선언한다.
      porps: ['propsdata'],
}
var appContent = {
      template: '<div>Content<button v-on:click="passNum">pass</button></div>',
      methods: {
        passNum: function() {
          // $emit을 이용하여 Root(인스턴스)로 값을 보낸다.
          this.$emit('pass', 10);
        }
      }
}

new Vue({
      el: '#app',
      components: {
        'app-header': appHeader,
        'app-content': appContent,
      },
      data: {
        'num': 0
      },
      methods: {
        deliverNum: function(value) {
          // pass에서 받은 값(10)을 인자 value로 받을 수 있다.
          // 인스턴스의 num 값을 value(10)로 바꾼다.
          this.num = value;

        }
      }
})

• 결과
  Root의 num 값이 10이 되었다.
  
  Root로 전달된 값이 app-haeder의 propsdata로 전달되었다.