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