Vue 3 中监听按钮点击事件最常用方式是 @click 绑定处理函数：基础写法为 配合 function handleClick() {}；支持传参和 $event；区分按键需用 @click.left、@contextmenu.prevent、@click.middle；内联表达式仅适用于简单场景。

Vue 3 中监听按钮点击事件，最常用、最直接的方式是用 @click 绑定处理函数。

基础写法：@click + 方法名

这是最推荐的写法，语义清晰、响应式安全、便于维护：

• 模板中写 <button>点我</button>
• 在 <script setup></script> 中定义函数：
  function handleClick() { console.log('按钮被点了'); }
• 如果需要访问响应式数据，配合 ref 或 reactive 即可：
  

  const count = ref(0);<br>function handleClick() { count.value++; }

支持传参和事件对象

点击时想传自定义参数或获取原生 DOM 事件，可以直接写：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• 传固定值：<button>提交</button>
• 同时传参数和事件对象：<button>删除</button>
• 函数接收：function handleClick(type, e) { console.log(type, e.target); }

区分鼠标按键（左/右/中）

默认 @click 只响应左键。如需区分不同按键，不能靠 @click.right（该写法无效）：

立即学习“前端免费学习笔记（深入）”；

• 左键：用 @click.left（语义更明确，等价于 @click）
• 右键：监听 @contextmenu.prevent，阻止默认菜单并执行逻辑
• 中键（滚轮按下）：用 @click.middle

内联表达式（简单场景可用）

逻辑极简时，可直接写表达式，但不建议用于复杂操作：

• <button>+1</button>
• <button>切换</button>