<template>
<button @click="handler">click Me!!</button>
</template>
<script>
export default{
methods:{
handler(event){
console.log(event);
}
}
}
</script>
<style lang="scss">
</style>
클릭하면 이벤트 객체 자동으로 들어감.
다른 이벤트 하고 싶으면 @이벤트명
하면 됨,
@scroll
근데
@click="handler(e)"
이런 식으로는 안됨.
만약, 인자를 추가로 받고 싶다면.
<template>
<button @click="handler('h1', $event)">click Me1!!</button>
<button @click="handler('what')">click Me2!!</button>
</template>
<script>
export default{
methods:{
handler(msg ,e){
console.log(msg);
console.log(msg, e);
}
}
}
</script>
<style lang="scss">
</style>
저렇게 $event 라고 넣어줘야 함. 약속임.
$e 안됨.
만약 이벤트 두개 추가하고 싶다,
@click="handler('h1', $event), handler2()"
이렇게 하면 됨.
참고로
@click.once
이건 딱 한번만 실행.
그리고 아예 기본 이벤트를 막고 싶을 땐
@click.once.prevent
예를 들어 a태그면 링크 이동 같은 거 막음
또, 버블링 막는거
@click.stop
이렇게 할 수 있음
또, 부모입장에서 자식에게 가는 버블링을 막을 수도 있음.
@click.capture
즉,
@click.capture.stop
이렇게 하면 오직 자신만 이벤트 받을 수 있음.
자식 클릭해도 자식이벤트 발동 안함.
내 이벤트로 발동함.
@click.self
이게 진짜 자기 자신만 이벤트임.
아무리 자식요소라도 온전히 내가 아니면 이벤트 작동을 안함.