Vue.js

이벤트 핸들러

sdafdq 2023. 10. 10. 15:11
<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

이게 진짜 자기 자신만 이벤트임.

아무리 자식요소라도 온전히 내가 아니면 이벤트 작동을 안함.

 

 

 

 

'Vue.js' 카테고리의 다른 글

키 이벤트  (0) 2023.10.11
@wheel.passive  (0) 2023.10.10
v-show  (0) 2023.10.05
뷰 태그 그룹핑  (0) 2023.10.05
뷰 조건문  (0) 2023.10.05