在Vue中,使用@click.stop修饰符可以阻止事件向父级元素传递,从而实现单击父级元素执行函数,而单击子元素不执行函数的需求 
目录
1、@click.stop介绍2、任何事件都不触发3、不触发父级事件，触发属于自己的事件总结最近遇到这么一个问题：
有一个父div，包含一个子div。要求单击父div时执行fun()函数，而单击子div时不执行fun()函数。
可以使用 @click.stop 阻止事件向父级元素传递
1、@click.stop介绍
在Vue中，@click是一个指令，用于监听元素的点击事件。@click.stop是其中的一个修饰符，它的作用是阻止事件冒泡，即阻止事件向父级元素传递。
具体来说，当一个元素被点击时，它所处的DOM层级结构中的所有父级元素都会接收到该事件。如果在父级元素上也绑定了类似的@click事件，那么这个事件也会被触发。而使用了@click.stop修饰符的元素，当它被点击时，事件将不会再向父级元素传递。这可以避免事件被不必要地多次触发。
2、任何事件都不触发
<template> <div @click="fun"> <div @click.stop> <!--子div--> </div> </div></template><script>export default { methods: { fun() { // 点击父div时执行的功能 console.log('单击了父div'); }, },}</script>3、不触发父级事件，触发属于自己的事件
<template> <div @click="doSomething"> <button @click.stop="doSomethingElse">不会触发父级元素的点击事件</button> </div></template><script>export default { methods: { doSomething() { console.log('doSomething') }, doSomethingElse() { console.log('doSomethingElse') } }}</script>在上面的示例中，当点击按钮时，只会触发doSomethingElse方法，不会触发doSomething方法。
