关于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