vue3给button绑定事件

Vue3 给 button 绑定事件的方式有以下几种：

在 template 中使用 v-on 或者 @ 绑定事件：

<template>
  <button v-on:click="handleClick">Click me</button>
  <!-- 或者 -->
  <button @click="handleClick">Click me</button>
</template>

在 setup 函数中使用 on 绑定事件：

<template>
  <button ref="myButton">Click me</button>
</template>

<script>
import { on } from 'vue'

export default {
  setup() {
    const handleClick = () => {
      console.log('Button is clicked')
    }
    onMounted(() => {
      on(refs.myButton, 'click', handleClick)
    })
  }
}
</script>

在 setup 函数中使用 emit 触发事件：

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
import { defineEmits } from 'vue'

export default {
  emits: ['click'],

  setup(props, { emit }) {
    const handleClick = () => {
      emit('click')
    }
  }
}
</script>

以上就是 Vue3 给 button 绑定事件的三种方式。