vue @cliick.stop @click.prevent @click.self

@click.stop

功能：阻止子节点的冒泡。
DOM事件标准定义了两种事件流，分别是捕获事件和冒泡事件。事件捕获的是从document到触发事件的那个节点，即自上而下得去触发事件。相反的，事件冒泡是自下而上的去触发事件。
所以@click.stop的作用是阻止子节点触发事件时通知它的祖先元素。
以下例展示：

当我们点击最内部的那个button时，我们只执行了click2()；如果把@click.stop删去，我们在点击最内部那个button时，还会执行click1()。

@click.prevent

功能：阻止事件的默认行为。
如下例，@click.prevent阻止了链接标签默认跳转事件，而执行我们自定义的点击click()方法。

@click.self

功能：只当在 event.target 是当前元素自身时触发处理函数
简言之：加了self的点击方法只有自己可以触发，子节点点击之后无法触发；没加self的点击方法 子节点点击之后，也会因为冒泡而触发。
如下例：
由于我们加了@click.self，当我们电子最内部的div时，最外层的div的点击事件不会触发。

@click.prevent.self 和 @click.self.prevent

使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的
@click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。