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

<div id="app">
   <app-header v-bind:propsdata="num"></app-header>
   <app-content v-on:pass="deliverNum"></app-content>
   <!-- 2. pass라는 이벤트를 받으면 deliverNum 실행 -->
</div>

 

var appHeader = {
      template: '<div>Header</div>',
      props: ['propsdata']
      // 4. props로 상위 컴포넌트에서 num의 값을 받아온다.
   }
   var appContent = {
      template: '<div>Content<button v-on:click="passNum">pass</button></div>',
      methods: {
         passNum: function() {
            this.$emit('pass', 10);
            // 1. pass라는 이벤트에 10을 인자로 넘김
         }
      }
   }

   new Vue({
      el: '#app',
      components: {
         'app-header': appHeader,
         'app-content': appContent
      },
      data: {
         num: 0
      },
      methods: {
         deliverNum: function(val) {
            this.num = val;
         }
         // 3. deliverNum의 인자로 10을 받고 this.num에 대입한다.
      }
   });

 

 

 

같은 레벨의 컴포넌트는 통신이 안되므로 appContent에서

부모 컴포넌트(root)에게 이벤트를 올려주고

하위 컴포넌트(appHeader)에게 props로 데이터를 내려줘야한다.