事件处理参数

访问自定义参数

内联事件处理器允许传入自定义参数以代替原生事件。

<template>
  <div class="div-box">
    <button @click="say('hello')">Say hello</button>
    <button @click="say('bye')">Say bye</button>
  </div>
</template>

<script setup lang="ts">
function say(message: string) {
  alert(message)
}
</script>

访问原生事件参数

内联事件处理器允许接收一个特殊的$event参数或使用内联箭头函数来访问原生事件。

<template>
  <div class="div-box">
    <!-- 使用特殊的 $event 变量 -->
    <button @click="warn('Form cannot be submitted yet.', $event)">Submit</button>

    <!-- 使用内联箭头函数 -->
    <button @click="(event) => warn('Form cannot be submitted yet.', event)">Submit</button>
  </div>
</template>

<script setup lang="ts">
function warn(message: string, event: Event) {
  // 这里可以访问原生事件
  if (event) {
    event.preventDefault()
  }
  alert(message)
}
</script>