이벤트 핸들링
- 이벤트 핸들러를
@click
디렉티브에 연결할 때 ()
는 생략 가능
- 핸들러 함수의 인자로
event 객체
가 넘어옴
<template>
<button @click="handler">click 1</button>
<button @click="handler">click 2</button>
</template>
<script>
export default {
methods: {
handler(e) {
console.log( e );
}
}
}
PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
</script>
- 인자를 넣고 싶을 때
event 객체
를 넘기는 방법은 $event
를 넘김
<template>
<button @click="handler('hi1', $event)">click 1</button>
<button @click="handler('hi2', $event)">click 2</button>
</template>
<script>
export default {
methods: {
handler(msg, e) {
console.log( msg, e );
}
}
}
hi1
PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
</script>
- 하나의 요소에 이벤트 핸들러를 여러개 붙일 수 있다.
- 이벤트 핸들러를 여러개 붙일 때는
()
를 생략하면 작동하지 않는다. ( 주의! )
<template>
<button @click="handlerA(), handlerB()">click 1</button>
</template>
<script>
export default {
methods: {
handlerA() {
console.log( 'A' );
},
handlerB() {
console.log( 'B' );
}
}
}
A
B
</script>