Vue.js - 컴포넌트 통신 방식 event emit

event emit
하위 컴포넌트에서 상위 컴포넌트로 통신하기 위해 신호를 보내는 것

• event emit 전달 문법
  <컴포넌트명 v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></컴포넌트명>

예시

<div id="app">
    <!-- 하위 컴포넌트의 이벤트를 상위 컴포넌트로 전달하는 방법 -->
    <!-- <컴포넌트명 v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></컴포넌트명> -->
    <app-header v-on:pass="logText"></app-header>
    <app-content v-on:increase="increaseNumber"></app-content>
    <div>{{ num }}</div>
</div>

<script>
    var appHeader = {
      // 클릭했을 때 이벤트 발생하게 하는 메서드 : v-on:click="메서드명"
      template: '<button v-on:click="passEvent">click me</button>',
      methods: {
        passEvent: function() {
          // $emit을 이용하여 pass라는 event를 보내준다.
          this.$emit('pass');
        }
      }
    }
    var appContent = {
      template: '<button v-on:click="addNumber">add</button>',
      methods: {
        addNumber: function() {
          this.$emit('increase')
        }
      }
    }


    new Vue({
      el: '#app',
      components: {
        'app-header': appHeader,
        'app-content': appContent,
      },
      methods: {
        // (conponents 기준)상위 컴포넌트의 메서드
        logText: function() {
          console.log('hi');
        },
        increaseNumber: function() {
          this.num = this.num + 1;
        }
      },
      data: {
        num: 10
      }
    });

 </script>

결과