Vue3 按钮绑定事件 - 三种方法详解 - 常规

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 绑定事件的三种方式。