关于vue.js:冒泡机制导致的相关问题

在我的项目中，因为冒泡机制，外部 div 和内部 div 调用的同一个办法执行了屡次，导致传值不正确。

问题代码：

<div class="outer" @click="handleCick">
  <div class="middle" @click="middle">
    <button @click="handleCick"> 点击我(^_^)</button>
  </div>
</div>

  methods: {middle: function() {// console.log("middle: 这是两头的 Div");
      console.log("middle ___ isClick", this.isClick);
    },
    outer: function() {// console.log("outer: 这是里面的 Div");
      console.log("outer ___ isClick", this.isClick);
    },
    handleCick() {console.log("以后___ isClick", this.isClick);
      this.isClick = !this.isClick
      console.log("___ isClick", this.isClick);
    },
  }

输入后果：

  以后___ isClick false
  ___ isClick true
 middle ___ isClick true
   以后___ isClick true
  ___ isClick false

从打印后果上看，handleCick 这个办法，执行了两次，这也是冒泡机制导致。所以，在 vue 中能够应用事件修饰符 stop 来阻止冒泡行为。
其余的 vue 事件修饰符有 .prevent .stop .once .capture .self

将上述到代码进行如下批改：

<button @click.stop="handleCick"> 点击我(^_^)</button>

这样，handleCick 只会执行一次，就达到咱们的指标冀望了。

参考：
1，事件修饰符——官网
2，vue- 事件修饰符 - 详解 -CSDN