Vue · v-on和事件修饰符（.stop .prevent .capture .self .once）

最新推荐文章于 2024-06-26 08:53:16 发布

_Mores

最新推荐文章于 2024-06-26 08:53:16 发布

阅读量1.4k

点赞数 3

分类专栏：前端 · Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_38604274/article/details/104816634

版权

本文详细介绍了Vue中事件修饰符的使用，包括.stop用于阻止冒泡，.prevent防止默认事件，.capture在事件捕获阶段触发，.self确保事件仅在自身元素上触发，以及.once使事件处理函数只执行一次。通过多个代码实例和运行效果展示了各个修饰符的作用和区别。

摘要由CSDN通过智能技术生成

【②代码实现-有.stop，无.self】

【②运行效果-有.stop，无.self】

【③代码实现-无.stop，有.self】

【③运行效果-无.stop，有.self】

一、事件修饰符

.stop 阻止冒泡

.prevent 组织默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次

二、事件修饰符的使用

（1）.stop

在没使用.stop时，默认是冒泡机制

.stop阻止所有冒泡行为

【代码实现-无.stop】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue学习</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			.inner{
				height: 9.375rem;
				background-color: bisque;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="inner" @click="div1Handler">
				<input type="button" value="点我" @click="btnHandler"/>
			</div>

		</div>
		
		
		<script>
		//注意:在VM实例中，想要获取data上的数据，或想调用methods中的方法，需要用 this.数据属性名 或 this.方法名 来访问。表示我们new出来的实例对象
			var vm = new Vue({
				el:'#app',
				data:{},
				methods:{
					div1Handler(){
						console.log("inner div点击事件")
					},
					btnHandler(){
						console.log("btn点击事件")
					}
				}
			})
		</script>
	</body>
</html>

【运行效果-无.stop】

点击“点我”按钮后，先触发了按钮本身的事件，接着触发了父级组件div的事件。

【代码实现-有.stop】

想要实现仅触发组件本身，不触发其父级组件的事件，可以加.stop在事件

.stop所加的位置：

全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue学习</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			.inner{
				height: 9.375rem;
				background-color: bisque;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="inner" @click="div1Handler">
				<input type="button" value="点我" @click.stop="btnHandler"/>
			</div>

		</div>
		
		
		<script>
		//注意:在VM实例中，想要获取data上的数据，或想调用methods中的方法，需要用 this.数据属性名 或 this.方法名 来访问。表示我们new出来的实例对象
			var vm = new Vue({
				el:'#app',
				data:{},
				methods:{
					div1Handler(){
						console.log("inner div点击事件")
					},
					btnHandler(){
						console.log("btn点击事件")
					}
				}
			})
		</script>
	</body>
</html>