.self 修饰符用于限制事件仅在当前绑定元素自身被点击时触发；如果点击的是其子元素，即使事件发生冒泡，也不会执行对应回调。它非常适合需要区分“点击容器本身”与“点击内部元素”的使用场景，例如可展开面板、卡片区域或弹层标题的点击控制。
.self 修饰符的功能非常直观：它让事件只有在当前绑定元素本身被点击时才会触发。如果用户点击的是该元素内部的子元素，即便事件冒泡到了父级，也不会执行回调函数。
什么时候用 .self？
这种需求在各类容器元素中十分常见，比如卡片、导航菜单、弹窗外层、折叠面板等结构，开发时经常需要明确判断“点击的是容器自身”，还是“点击的是容器内部的具体内容”。以可展开面板为例，通常只希望用户点击面板标题时切换展开状态；如果点击的是内部按钮、链接或文本内容，就不应该顺带触发展开或收起逻辑。
.self 的写法和效果
写法很简单，直接加在事件指令后面即可：@click.self="handler"。需要注意的是，.self 不会阻止事件冒泡，也不会干扰子元素自身绑定的事件，它的本质是对事件触发来源进行判断，只“过滤”掉从子元素冒泡上来的同类事件。
- ✅ 点击 div 自身空白区域 → 触发 handler
- ❌ 点击 div 内部的 button/span/a 等子元素 → 不触发 handler（即使这些子元素没有绑定 click，或已经绑定了自己的 click，也互不影响）
对比其他修饰符更清楚
它和 .stop 并不是同一个概念：.stop 表示“直接阻止事件继续冒泡”，当子元素被点击后，事件不会再向父元素传递，因此父元素无法接收到这个点击事件；而 .self 更像是“父元素只响应自己本身触发的点击”。也就是说，父元素并没有失去监听事件的能力，子元素自己的事件依然可以正常执行（例如子元素绑定了 @click，仍会照常触发），只是对于那些由子元素冒泡上来的 click，父元素不会进行响应。
如果不使用修饰符，普通的 @click 属于“只要事件到达当前元素就执行”，无论是直接点击该元素，还是点击它的子元素并通过冒泡传上来，都会触发对应的方法。
一个小例子
下面这个 div 在点击空白区域时会弹出 alert，但点击里面的按钮时不会触发：
这是容器
