Vue.js - event emit

event emit이란?

: 컴포넌트의 통신 방법 중 하위 컴포넌트에서 상위 컴포넌트로 통신하는 방식

event emit 코드

// 하위 컴포넌트의 내용
this.$emit('이벤트 이름');

<!-- 상위 컴포넌트의 템플릿 -->
<div id="app">
  <child v-on:하위 컴포넌트의 이벤트 이름="상위 컴포넌트의 메서드 이름""></child>
</div>

event emit 예제

<div id="app">
        <app-header v-on:pass="logText"></app-header>
</div>

<script>
        var appHeader = {
  	   // 버튼을 click 했을 때 passEvent를 실행
            template: '<button v-on:click="passEvent">click me</button>',
            methods: {
                passEvent: function() {
                    this.$emit('pass');
                }
            }
        }
        new Vue({
            el: '#app',
            components: {
                'app-header' : appHeader
            },
            methods: {
                logText: function() {
                    console.log('hi');
                }
            }
        });
    </script>

• 'click me'를 클릭했을 때 AppHeader 태그에서 pass라는 이름으로 이벤트 발생

• 상위 컴포넌트의 logText가 하위 컴포넌트에서 실행
  

 <div id="app">
        <p>{{ num }}</p>
       
        <app-header v-on:pass="logText"></app-header>
        <app-content v-on:add="logNum"></app-content>
    </div>

    <script>
        var appHeader = {
            template: '<button v-on:click="passEvent">click me</button>',
            methods: {
                passEvent: function() {
                    this.$emit('pass');
                }
            }
        }

        var appContent = {
            template: '<button v-on:click="addNumber">add</button>',
            methods: {
                addNumber: function() {
                    this.$emit('add')
                }
            }

        }
        new Vue({
            el: '#app',
            components: {
                'app-header' : appHeader,
                'app-content' : appContent
            },
            methods: {
                logText: function() {
                    console.log('hi');
                },
                logNum: function() {
                    ++this.num;
                }
            },
            data: {
                num: 10
            }
        });
    </script>

• {{ num }} 으로 상위 컴포넌트의 변수를 선언할 수 있음

• 'add'를 클릭했을 때 AppContent 태그에서 add라는 증가 이벤트 발생

• 상위 컴포넌트의 logNum이 하위 컴포넌트에서 실행