Vue基础教程（74）事件修饰符之self：当你的Vue组件有了“防手贱”功能——.self修饰符的奇幻漂流

第一章：为什么你的按钮总在“帮倒忙”？

记得我第一次用Vue写购物车页面时，遭遇了职业生涯最魔幻的bug——点击商品详情按钮，结果整个商品卡突然消失了！查了半小时代码才发现，原来外层div绑定了删除事件，而内层按钮的点击事件像坐上了窜天猴，“咻”地冒泡到了外层。

这时候Vue事件修饰符家族闪亮登场。在认识今天的主角.self之前，我们先快速扫盲这个家族的四大金刚：

• .stop：像地铁急刹车，立即阻止事件传播
• .prevent：像对付熊孩子，阻止默认行为
• .capture：切换监听模式，从冒泡改捕获
• .self：今天的C位，只响应“亲生”事件

第二章：.self修饰符——我不是针对谁

2.1 官方说人话版

如果说普通点击事件像家族微信群（发条消息全群炸锅），那么.self就像设置了“仅@我可见”——只有直接点击我本尊才回复，子女辈传来的消息统统已读不回。

2.2 经典翻车现场还原

<!-- 翻车版 -->
<div @click="closeDialog" class="dialog-backdrop">
  <div class="dialog-content">
    <button @click="submitForm">提交订单</button>
  </div>
</div>
<!-- 修复版 -->
<div @click.self="closeDialo