이벤트 emit 사용방법

이 글은 인프런의 캡틴판교님의 강의를 수강하면서 개인 공부를 위해 작성한 글입니다.

이벤트 emit

-> 저번 시간에 뷰의 경우 하위 컴포넌트는 상위 컴포넌트에게 이벤트를 발생시켜 전달 한다고 배웠는데, 이때 이벤트를 전달 시키는 것을 emit이라고 한다.

실습 예제 코드

    <div id="app">
        <p>{{ num }}</p>
        <!-- 7. <app-header v-on: 하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header> -->
        <app-header v-on:pass="logText">/</app-header>
        <app-content v-on:increase="addNmber"></app-content>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
        //3. 하위 컴포넌트를 담을 변수 생성
        var appHeader = {
            //4. v-on:click="클릭시 발생할 이벤트 명"
            template: '<button v-on:click="passEvent">click me</button>',
            methods: {
            //5. 이벤트 생성
                passEvent : function() {
                    //6. this.$emit('하위 컴포넌트에서 발생한 이벤트 이름') 정의
                    this.$emit('pass');
                }
            }
        }
        var appContent = {
            template: '<button v-on:click="add">addNumber</button>',
            methods: {
                add: function() {
                    this.$emit('increase');
                }
            }
        }
        new Vue({
            //1. 뷰 객체를 생성하고 상위 컴포넌트 명시
            el : '#app',
            components : {
                // 2. 하위 컴포넌트 생성
                'app-header' : appHeader,
                'app-content' : appContent
            },
            // 8. 1번에서 생성한 상위컴포넌트의 function 정의
            methods : {
                logText : function(){
                    console.log('hi');
                },
                addNmber : function(){
                    this.num = this.num + 1;
                }
            },
            data : {
                num: 10
            }
        });
    </script>

중요 포인트

v-on:click="클릭시 발생할 이벤트 명"

-> 뷰에서 클릭 이벤트를 사용할 때 쓰는 속성이다.

v-on: 하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"

-> 뷰에서 이벤트를 사용하기 위한 속성 명

this.$emit('하위 컴포넌트에서 발생한 이벤트 이름') 정의

-> 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달하기 위해 사용한다.