[Vue.js] 이벤트 핸들링 - $emit

dhkim 8월 15, 2022

 


 이번 포스팅은 "v-on" 디렉티브와 관련된 이벤트 핸들링 문법에 대해 살펴봅니다.

더불어, "emit"을 통한 상위 컴포넌트로의 이벤트 전달 방법을 다룹니다.


1. 이벤트 바인딩

 Vue 컴포넌트 아래에 "button"을 추가하여 v-on 디렉티브 click이벤트를

Vue 인스턴스 methods에서 정의한 "increaseNumber"와 바인딩한 예제이다.

 [index.html]

1
2
3
<div id="app">
	<button v-on:click="increaseNumber">Add Button (Normal)</button>
</div>

 [main.js]

1
2
3
4
5
6
7
8
9
new Vue({
    el: '#app',
    
    methods: {
        increaseNumber: function(){
            console.log('Call IncreaseNumber');
        }
    }
})

[실행결과]




2. emit

1)  Vue 컴포넌트 하위에 "app-component"라는 하위 컴포넌트를 생성

2) 하위 컴포넌트 "appComponent"에 click이벤트로 "addNumber" methods를 호출하도록 지정

3) "addNumber" 콜백함수는 상위 컴포넌트에 "increase"라는 이벤트를 발생

   이 때, 하위 컴포넌트의 increase 이벤트를 상위 컴포넌트의 "increaseNumber" 메소드 함수에 바인딩
   <app-component v-on:increase="increaseNumber"></app-component>

4) 상위 컴포넌트인 Vue 인스턴스의 methods 내 정의한 "increaseNumber"가 실행

[index.html]

1
2
3
4
5
6
7
<div id="app">
	<h2>Binding Exercise</h2>
	<app-header v-bind:propsdata="message"></app-header>
	<app-content v-bind:propsdata="num"></app-content>
	<app-component v-on:increase="increaseNumber"></app-component>
	<button v-on:click="increaseNumber">Add Button (Normal)</button>
</div>

[main.js]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
let appHeader = {
    template : '<h1>Header : {{ propsdata }}</h1>',
    props : ['propsdata']
}

let appContent = {
    template : '<div style="margin: 5px;">Content : {{ propsdata }}</div>',
    props: ['propsdata']
}

let appComponent = {
    template: '<button v-on:click="addNumber">Add Button (Component)</button>',
    methods: {
        addNumber: function(){
            this.$emit('increase');         // 상위 컴포넌트로의 알림
        }
    }
}

new Vue({
    el: '#app',

    // 지역 컴포넌트
    components: {
        'app-header': appHeader,
        'app-content': appContent,
        'app-component': appComponent
    },

    data: {
        message: 'Message ...',
        num: 10
    },

    methods: {
        increaseNumber: function(){
            this.num++;
        }
    },
})

[실행결과]

emit을 통해 하위 컴포넌트에서 발생한 이벤트는 [개발자도구 > Timeline > "Component events"] 에서 확인 할 수 있다.



[도식화]

0 댓글