Vue.js 在组件上添加click事件，不触发组件内的事件，只触发在组件上添加的事件

兔兔软糖

已于 2023-03-27 10:04:58 修改

阅读量1.3k

点赞数

文章标签： vue.js javascript ecmascript

于 2023-03-27 10:04:04 首次发布

本文链接：https://blog.csdn.net/m0_53397360/article/details/129789569

版权

在Vue中，组件`component1`的模板包含一个点击事件`jumpHome`。当外部给组件添加`jumpUrl`事件，使用`@click.native.capture.stop`确保只触发添加的事件，阻止组件内部事件的执行。这展示了如何利用`@click`修饰符控制事件的传播和处理顺序。

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

component1.vue中存在

		<template>
		 <div class="wrap-top">
		   <div class="logo yg_cursor" @click="jumpHome"> </div>
		</template>
		
在引用该组件的同时添加jumpUrl事件

		<component1 @click.native.capture.stop="jumpUrl"> </component1>

component1组件中存在jumpHome()事件，点击会触发，同时给component1添加jumpUrl事件，通过使用***@click.native.capture.stop***只触发组件上添加的事件不出触发组件内的事件

@click修饰符可连写：
1、@click.stop 阻止事件冒泡
2、@click.capture 优先触发
3、@click.native 侦听组件根元素上的原生事件