冒泡机制导致的相关问题。

在项目中，由于冒泡机制，内部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