vue3 event handler

<template>
  <button @click="handler('hi', $event)">
    Click me! 1 
  </button>
  <button @click="handler('what')">
    Click me! 2 
  </button>
</template>

<script>
export default {
  methods:{
    // handler(e){
    //   console.log(e)
    //   //PointerEvent

    //   console.log(e.target)
    //   //<button>Click me!</button>

    //   console.log(e.target.textContext)
    //   //undefined

    //   console.log(e.target.innerHTML)
    //   //Click me!
    // }
    handler(msg, event){
      //위의 handler 처럼 인수가 없는경우는 object로 받아오지만
      //hi, what과 같이 인수가 있는경우 인수를 받아옴
      console.log(msg)
      //hi , what
      console.log(event)
    }
  }
}
</script>

 

<template>
  <button @click="handlerA(), handlerB()">
    Click me!  
  </button>
</template>

<script>
export default {
  methods:{

    //event 갯수가 여러개라면 소괄호를 열고 닫아줘야한다.
    // handlerA, handlerB 로만 쓰면 에러 발생
    handlerA(){
      console.log('a')
    },
    handlerB(){
      console.log('b')
    }
  }
}
</script>