.self修饰符使事件仅在当前绑定元素自身被点击时触发，点击其子元素不执行回调；适用于需区分点击容器自身与内部元素的场景，如可展开面板的标题控制。

.self 修饰符的作用很明确：它让事件只在**当前绑定元素本身被点击时才触发**，如果点击的是它的子元素，哪怕事件冒泡到了它身上，也不会执行回调函数。

什么时候用 .self？

常见于容器类元素（比如卡片、菜单栏、弹层外层）需要区分“点我自身”和“点我里面的内容”。比如一个可展开的面板，你希望点击面板标题才切换展开状态，但点击里面的按钮、链接或文字时不触发切换。

.self 的写法和效果

语法就是直接加在事件指令后面：@click.self="handler"。注意它不阻止冒泡，也不影响子元素自己的事件，只是“过滤”掉从子元素冒泡上来的同类型事件。

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• ✅ 点击 div 自身空白区域 → 触发 handler
• ❌ 点击 div 内部的 button/span/a 等子元素 → 不触发 handler（即使它们没绑 click 或绑了也互不影响）

对比其他修饰符更清楚

和 .stop 不同：.stop 是“拦住冒泡”，子元素点完后父元素收不到任何事件；而 .self 是“不认冒泡来的”，父元素仍会收到子元素触发的其他事件（比如子元素自己绑了 @click，照常执行），只是不响应“被冒泡上来的 click”。

和没修饰符相比：@click 是“来者不拒”，只要事件到达这个元素（无论是直接点它，还是子元素冒泡上来），都会执行。

一个小例子

下面这个 div 点击空白处会弹 alert，但点里面的按钮不会：

<div>
  这是容器
  <button>点我不会触发上面的 alert</button>
</div>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！