.self修饰符确保事件仅在绑定元素自身触发时执行，即event.target等于event.currentTarget；用于卡片点击、遮罩层关闭等需区分目标元素的场景。

在 Vue 3 中，`.self` 修饰符用于精准控制事件触发范围：它确保回调函数**仅当事件的原始目标（event.target）就是绑定事件的元素本身**时才执行，而不是它的任意子元素。

.self 的核心逻辑

事件默认会冒泡。比如一个 <div> 里嵌套了 <code><button></button>，点击按钮时，click 事件会先在按钮上触发，再向上冒泡到父 div。若父 div 绑定了 @click="handler"，不加修饰符就会被触发——即使用户点的是里面的按钮。

加上 `.self` 后，Vue 会在执行前检查：event.target === event.currentTarget。只有两者相等（即事件没“跑偏”，确实发生在当前元素上），才会调用回调。

典型使用场景

• 卡片容器点击响应：整个卡片可点击跳转，但内部的「删除」「编辑」按钮要独立操作，不希望点按钮时也触发卡片跳转
• 下拉菜单遮罩层：点击菜单区域外的遮罩层关闭菜单，但点击菜单内容本身不应关闭
• 自定义表单控件：外层包裹 div 做样式容器，只希望直接点击该容器空白处才触发校验或展开逻辑

写法与对比示例

假设结构如下：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

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

  

标题

  删除

此时：

• 不加修饰符：@click="handleCardClick" → 点标题、点按钮、点空白处，都会触发 handleCardClick
• 加 `.self`：@click.self="handleCardClick" → 只有直接点击 <div class="card"> 的空白区域（且非子元素）时才触发；点标题或按钮，<code>handleCardClick 不执行

  注意事项

  • .self 和 .stop 功能不同：前者是“过滤触发源”，后者是“截断传播路径”。二者可共存，但目的不重叠
  • 它不阻止子元素自身的事件，只让父级监听器对子元素触发的事件“视而不见”
  • 适用于所有原生 DOM 事件（click、mousedown、keyup 等），不仅限于 click
  • 在组合式 API 中写法一致：@click.self="onClick"，无需额外配置