Vue.js 시작하기 - 컴포넌트 통신 방법

vue에서의 같은 레벨의 컴포넌트 통신은 root 컴포넌트를 거쳐 이루어진다.

예시) AppContent에서 AppHeader로 10이라는 데이터를 넘기려고 할 때

같은 레벨의 컴포넌트 : AppHeader, AppContent

AppContent에서 Root로 데이터를 담아 event를 올려준 후,
AppHeader에서 props 속성으로 데이터를 넘겨받는다.

출처: Vue.js 시작하기 - 같은 컴포넌트 레벨 간의 통신 방법 구현 2

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

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var appHeader = {
      template : '<div>header</div>',
      props: ['propsdata']
    }

    //버튼을 클릭할 때 passNum을 실행시켜 준다.
    var appContent = {
      template : '<div>content<button v-on:click="passNum">pass</button></div>',
      methods : {
        passNum : function(){
          //$emit을 실행시켜 pass라는 이벤트 이름과 10이라는 데이터를 넘겨준다.
          this.$emit('pass',10);
        }
      }
    }

    new Vue({
      el : "#app",
      components : {
        'app-header': appHeader,
        'app-content': appContent
      },
      data : {
        num : 0
      },
      methods:{
    	//value에 num이 들어간다.
        deliverNum : function(value){
          this.value = value;
        }
      }
    });
  </script>