Vue事件绑定怎么传参？如何利用修饰符防止点击冒泡的实战技巧？

Vue事件绑定传参的方式灵活多样，但选择正确的方法取决于三个关键因素：参数是否固定、是否需要原生事件对象，以及是否需要借助修饰符控制事件传播行为。至于“阻止冒泡”，许多人以为只需添加.stop即可，实际上必须结合具体场景选择合适方案，否则容易带来隐患。

模板中直接传参：适合固定值

这是最直观的做法——直接将参数写在事件绑定中。例如：

• @click="handleClick('确认删除')" —— 字符串、数字、布尔值均可直接传入；
• 多参数用逗号隔开：@click="handleClick(id, 'edit', true)"；
• 需要特别注意：这样写时原生event对象不会自动传入，如需使用，必须显式传递$event。

传入原生 event 对象：需要坐标、target 等信息时

当需要读取点击位置、判断点击的目标元素，或在方法中手动调用stopPropagation()时，必须将$event作为参数显式传递。例如：@click="handleClick($event, 'submit')"。方法中参数的接收顺序需保持一致：handleClick(event, action)。这样既能获取自定义参数，也能操作原生事件的target、clientX等属性。

用 .stop 阻止冒泡：最简方案，优先推荐

当父容器和子按钮都绑定click事件，点击子按钮不希望触发父级逻辑时，添加.stop即可：

• 确定
  ；
• 修饰符写在事件名后、括号前，顺序敏感：@click.stop.prevent表示先阻止冒泡再阻止默认行为；
• 这种方式在模板层完全解决，无需修改JS逻辑，可读性也强。

用 .self 实现“仅点击空白区域才响应”

某些交互场景要求只在元素自身区域点击时才触发，典型例子是点击弹窗背景关闭弹窗，但点击内部内容不触发关闭。使用.self非常自然：

• 正文
  ；
• 点击.content不会触发hideModal，因为事件是从子元素冒泡上来的；
• 只有点击.modal的padding或背景区域才会触发，天然适配“点击外部关闭”的需求。

进阶：捕获阶段 + stop 组合处理特殊嵌套

极少数情况下，父组件需要在事件到达子组件之前就拦截（例如全局快捷键监听），此时可使用.capture：

• 按钮
  ；
• 点击按钮时，handleGlobalClick在捕获阶段立即执行，并且被.stop阻断后续传播，handleBtn根本不会触发；
• 这种写法需谨慎使用，容易破坏预期的事件流，建议仅用于明确需要提前拦截的场景。