最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Vue基础语法如何使用修饰符 .self 限制只有点击自身时触发事件
时间：2026-09-06 16:05:50 编辑：袖梨 来源：一聚教程网
.self修饰符使事件仅在当前绑定元素自身被点击时触发，点击其子元素不执行回调；适用于需区分点击容器自身与内部元素的场景，如可展开面板的标题控制。
.self 修饰符的作用很明确：它让事件只在当前绑定元素本身被点击时才触发，如果点击的是它的子元素，哪怕事件冒泡到了它身上，也不会执行回调函数。
什么时候用 .self？
常见于容器类元素（比如卡片、菜单栏、弹层外层）需要区分“点我自身”和“点我里面的内容”。比如一个可展开的面板，你希望点击面板标题才切换展开状态，但点击里面的按钮、链接或文字时不触发切换。
.self 的写法和效果
语法就是直接加在事件指令后面：@click.self="handler"。注意它不阻止冒泡，也不影响子元素自己的事件，只是“过滤”掉从子元素冒泡上来的同类型事件。
- ✅ 点击 div 自身空白区域 → 触发 handler
- ❌ 点击 div 内部的 button/span/a 等子元素 → 不触发 handler（即使它们没绑 click 或绑了也互不影响）
对比其他修饰符更清楚
和 .stop 不同：.stop 是“拦住冒泡”，子元素点完后父元素收不到任何事件；而 .self 是“不认冒泡来的”，父元素仍会收到子元素触发的其他事件（比如子元素自己绑了 @click，照常执行），只是不响应“被冒泡上来的 click”。
和没修饰符相比：@click 是“来者不拒”，只要事件到达这个元素（无论是直接点它，还是子元素冒泡上来），都会执行。
一个小例子
下面这个 div 点击空白处会弹 alert，但点里面的按钮不会：
<div @click.self="alert('只点我本体才触发')">这是容器<button>点我不会触发上面的 alert</button></div>