vue 事件修饰符个人见解

最新推荐文章于 2024-10-10 11:02:42 发布

糖醋小侠

最新推荐文章于 2024-10-10 11:02:42 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/qq_41868790/article/details/84378239

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

事件修饰符总览

stop : 阻止冒泡
capture ：捕获
self ：点击自身才触发
once ：只触发一次
prevent ：阻止默认事件

综述

例如下面代码中的各个嵌套的div，say()方法为弹窗显示所传入的参数。

<div id="app">
  <div @click="say('outter')">outter
    <div @click="say('middle')">middle
      <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	  </div>	  
	</div>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

vue中点击内层的div时默认以冒泡的方式依次触发事件。即点击最内层inner时，会依次从内到外出发事件，此时点击inner后弹窗顺序为

事件修饰符的作用即为控制这种事件的触发方式。

stop

将div代码修改为,即在middle一层加上stop修饰。

	<div @click="say('outter')">outter
	  <div @click.top="say('middle')">middle
	    <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	    </div>	  
	  </div>
	</div>

此时，运行弹窗顺序为

middle弹窗后便停止，outter没有继续弹窗，所以称stop的功能为阻止冒泡。

capture

capture 释义为捕获，其流程与冒泡相反，冒泡是从内至外，捕获为从外到内。
修改代码为：

  <div @click="say('outter')">outter
    <div @click.capture="say('middle')">middle
      <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	  </div>	  
	</div>
  </div>

此时点击inner的弹窗顺序为:

在响应inner前，其外层middle先将点击事件捕获了，所以先触发middle。而outter没有修饰默认为冒泡所以在内层两个弹窗后弹窗。

self

self 为响应自身时才可触发。
修改代码为：

<div @click="say('outter')">outter
    <div @click.self="say('middle')">middle
      <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	  </div>	  
	</div>
  </div>

此时点击inner的弹窗顺序为:

其中middle被修饰为self，所以当点击inner时，向上冒泡时middle不被触发，直接跳到outter。此时只有点击middle时才可触发其点击事件。

once

once 为只响应第一次，随后的便不响应。
修改div代码为：

  <div @click="say('outter')">outter
    <div @click.once="say('middle')">middle
      <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	  </div>	  
	</div>
  </div>

此时第一次点击inner时，弹窗顺序为：

第二次点击inner时，弹窗顺序为：

即第二次触发middle时，事件被once修饰符过滤了。

prevent

prevent 作用为阻止默认事件
沿用上例代码：

  <div @click="say('outter')">outter
    <div @click.once="say('middle')">middle
      <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	  </div>	  
	</div>
  </div>

a标签的默认事件为跳转进入href，增加click.prevent修饰后，当点击该链接时，并没有发生跳转而直接发生div的弹窗响应了。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <div @click="say('outter')">outter
    <div @click="say('middle')">middle
      <div @click="say('inner')">inner
		  <a href="http://www.baidu.com" v-on:click.prevent>点击</a>
	  </div>	  
	</div>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>
</body>
</html>