<div class="box1" @click="clickBox1">
  box1
  <div class="box2" @click="clickBox2">
    box2
  </div>
</div>
/.../
 clickBox1(){
   alert("box1")
 },
 clickBox2(){
   alert("box2")
 }

效果图

我定义了一个box1，并给它添加了一个click事件clickBox1
又在box1内定义了一个box2，也给它添加了一个click事件clickBox2
我希望这两个事件相互独立，互不影响

但实际上在我点击内部的box2时，触发clickBox2事件后，紧接着box1的clickBox1事件也会被触发
这是由于事件冒泡机制，内部元素的事件会通过向上冒泡传递给其父元素

解决办法：
办法1：
给需要被触发的元素的点击事件上添加.stop修饰符来阻止事件继续冒泡传播

<div class="box1" @click="clickBox1">
   box1
   <div class="box2" @click.stop="clickBox2">
     box2
   </div>
 </div>
 /.../
 clickBox1(){
   alert("box1")
 },
 clickBox2(){
   alert("box2")
 }

办法2：
也可以使用原生js的event.stopPropagation()方法

<div class="box1" @click="clickBox1">
   box1
   <div class="box2" @click="clickBox2">
     box2
   </div>
 </div>
 /.../
 clickBox1(){
   alert("box1")
 },
 clickBox2(){
   event.stopImmediatePropagation()
   alert("box2")
 }