vue 事件修饰符

.stop修饰符:：阻止事件冒泡，不让他向外去执行函数

	<div @click="test1">
      <div @click.stop="test2">
        测试
      </div>
    </div>

	//点击内层div，输出：test2

.prevent修饰符： 阻止组件本来应该发生的事件，转而去执行自己定义的事件

<!-- 不再跳转页面 -->
<a href="https://www.baidu.com" @click.prevent="test2">跳转</a>
//输出：test2

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

. capture修饰符： 有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按冒泡方式触发的事件。

	<div @click.capture="test1">
	   <div @click="test2">
	      <div @click="test3">
	        测试
	      </div>
	   </div>
    </div>

   //点击内层div，输出：test1 test3 test2

.once修饰符：函数只能触发一次

.self修饰符：只有自身才能触发，通常用于避免冒泡事件的影响

<div @click.self="test1">
	<div @click="test2">
    	测试
    </div>
</div>

//点击内层div，输出：test2

.native修饰符：在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的

<div>
	<my-component @click.native="test2">
    	测试
    </my-component>
</div>

//点击内层div，输出：test2

标签：test2,修饰符,内层,vue,事件,组件,div
来源： https://blog.csdn.net/weixin_39150852/article/details/121488819