.self 是 vue 事件修饰符，仅当 event.target 等于 event.currenttarget（即点击元素自身）时才触发回调，常用于避免子元素冒泡触发父元素事件。
在 Vue 模板中，使用 .self 修饰符可以让事件**只在事件目标是当前元素本身时才触发**，而忽略从子元素冒泡上来的事件。
什么是 .self 修饰符？
.self 是 Vue 的事件修饰符之一。它会检查原生事件对象的 event.target 是否等于绑定事件的元素（即 event.target === event.currentTarget）。只有相等时，回调才会执行。
这在有嵌套结构、又不希望子元素触发父元素事件处理逻辑时特别有用。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
常见使用场景和写法
比如一个按钮内包含图标或文字，你只想点击「按钮空白区域」时触发，而不是点图标就触发：
- ✅ 正确写法（仅点击 button 自身生效）：
- ❌ 不加 .self（点击图标也会触发）：
—— 子元素点击后冒泡到 button，照样执行 - ⚠️ 注意：不能和
.stop混淆。.stop是阻止冒泡，.self是过滤触发源，二者目的不同
对比其他修饰符加深理解
-
@click.stop：点击子元素时，事件不会向上冒泡到父级（但 handler 仍会执行） -
@click.capture：在捕获阶段触发（早于冒泡），不影响 target 判断 -
@click.self：不管事件怎么传播，只在 target 就是当前元素时才执行 handler - 可组合使用，例如
@click.self.prevent（满足 self 条件时再阻止默认行为）
实际调试小技巧
如果不确定是否触发了，可在方法里打印：
handleClick(e) {
console.log('target:', e.target, 'currentTarget:', e.currentTarget);
}
当 e.target !== e.currentTarget 时，说明是子元素触发的，.self 会跳过执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
