<h3>@事件名.stop → 阻止冒泡</h3> <div @click="fatherFn" class="father"> <div @click.stop="sonFn" class="son">儿子</div> </div>
时间: 2025-07-04 22:20:40 浏览: 2
这段代码展示了Vue.js中**事件修饰符** `.stop` 的用法,用于阻止事件冒泡(Event Bubbling)。以下是详细解析:
---
### 核心机制:
1. **事件冒泡**
当子元素(`.son`)触发点击事件时,事件会依次向上传递(冒泡)到父元素(`.father`),触发父元素的 `fatherFn` 方法。
2. **`.stop` 修饰符的作用**
通过 `@click.stop="sonFn"`,Vue会在子元素的事件处理函数执行后**自动调用 `event.stopPropagation()`**,阻止事件继续冒泡到父元素。
---
### 代码执行流程:
1. 点击 `.son` 区域:
- 先执行 `sonFn`(子元素的方法)。
- 由于 `.stop` 修饰符,事件不会冒泡到 `.father`,因此 `fatherFn` **不会被触发**。
2. 若移除 `.stop` 修饰符:
- 先执行 `sonFn`,然后事件冒泡到 `.father`,触发 `fatherFn`。
---
### 其他常见事件修饰符(对比学习):
| 修饰符 | 作用 | 示例 |
|--------------|-----------------------------|-------------------------|
| `.stop` | 阻止事件冒泡 | `@click.stop="fn"` |
| `.prevent` | 阻止默认行为(如表单提交) | `@submit.prevent="fn"` |
| `.self` | 仅当事件从元素自身触发时调用 | `@click.self="fn"` |
| `.once` | 事件只触发一次 | `@click.once="fn"` |
---
### 实际应用场景:
1. **独立交互元素**
例如:模态框内的关闭按钮,点击时不应触发模态框外层的点击事件。
2. **避免不必要的父级事件**
在列表项中点击按钮时,不希望触发整行的点击事件。
---
### 对比原生JavaScript实现:
```javascript
// Vue 的 @click.stop 等价于:
document.querySelector('.son').addEventListener('click', function(e) {
e.stopPropagation(); // 阻止冒泡
sonFn(); // 执行子元素方法
});
```
---
### 注意事项:
1. **修饰符顺序**
Vue允许链式调用修饰符,如 `@click.stop.prevent`(先阻止冒泡,再阻止默认行为)。
2. **与 `.self` 的区别**
- `.stop` 是主动阻止后续冒泡。
- `.self` 是被动判断:只有事件目标为自身时才触发(不关心冒泡过程)。
3. **性能影响**
过度使用 `.stop` 可能干扰父组件的事件监听,需谨慎设计组件层级。
---
阅读全文
相关推荐









{{ data.bookName }} {{ data.bookAuthor }} {{ data.bookPublish }} ¥{{ data.price }} 减 <input type="text" :value="data.num" readonly class="cOnt"> 加 ¥{{data.total}} 删除 new Vue({ el: '#app', data: { userId: '', list: [] // list: [ // {userId:null,bookName:"图书1",image1:"/BookShopSystem_war/cart/xzwxz.png",price:50,num:2}, // {userId:null,bookName:"图书2",image1:"/BookShopSystem_war/cart/xzwxz.png",price:50,num:1}, // {userId:null,bookName:"图书3",image1:"/BookShopSystem_war/cart/xzwxz.png",price:50,num:2} // ] }, //选择或不选择一项 $(".xzWxz").click(function () { if ($(this).hasClass("on")) { $(this).removeClass("on"); } else { $(this).addClass("on"); } var ty = $(".xzWxz.on").length; $(".sXd1").find("font").html(ty); if (ty == es) { $(".ifAll").addClass("on"); } else { $(".ifAll").removeClass("on"); } jsZj(); }); 当我使用未被注释的list,
该代码点击后没有变化,而我使用注释的静态list数组,该代码点击有变化,为什么,未注释的list是能获取到数据并遍历了出来,如何解决

<template> 学生签到系统 <input type="text" v-model="student.S_id" placeholder="请输入学号"> <input type="text" v-model="student.S_pwd" placeholder="请输入密码"> 登录 班级尚未开启签到 <button @click="close">取消</button> </template> <script> import qs from "qs" import axios from "axios"; export default { name: "Login", data(){ return{ //弹窗 show:false, student:{ S_id:null, S_pwd:null, } } }, methods: { close() { this.show = false; // 隐藏弹出窗口 }, Login() { let param = qs.stringify(this.student); axios.post('/xx/students/login', param).then((response) => { //获取当前学生的班级信息并传入sessionStorage,参数为S_class sessionStorage.setItem('classInfo', response.data.data.s_class); //获取当前学生的id信息并传入sessionStorage sessionStorage.setItem('studentId', this.student.S_id); //弹窗 if (response.data.msg === "账号或密码错误"){ this.show = true; } if (response.data.code == 200) { this.$router.push({"path": "/signLog"}) } }).catch((error) => { console.log(error); }); } } } </script> <style scoped> .wrapper > h2{ text-align: center; margin: 40px 0px; } .content{ padding: 8px; } .form-item { margin-bottom: 20px; } .form-item > input{ width: 100%; height: 40px; padding: 4px; outline: none; border: 1px solid rebeccapurple; box-sizing: border-box; } .form-item > a{ display: inline-block; width: 100%; height: 40px; background-color: sandybrown; text-align: center; line-height: 40px; } .form-item > 这段代码要怎么样实现弹窗







