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

在项目中，由于冒泡机制，内部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
【冒泡机制导致的相关问题。】将上述到代码进行如下修改：

这样，handleCick 只会执行一次，就达到我们的目标期望了。
参考：
1，事件修饰符——官方
2，vue-事件修饰符-详解-CSDN