冒泡机制引起的相关问题
在项目中，由于冒泡机制，导致内层div和外层div调用同一个方法多次执行，导致传值错误。问题代码：点我(^_^)
methods:{middle:function(){//console.log("middle:ThisisthemiddleDiv");console.log("middle___isClick",this.isClick);},outer:function(){//console.log("outer:ThisistheouterDiv");console.log("外___isClick",this.isClick);},handleCick(){console.log("当前___isClick",this.isClick);this.isClick=!this.isClickconsole.log("___isClick",this.isClick);},}输出结果：Current___isClickfalse___isClicktruemiddle___isClicktrueCurrently___isClicktrue___isClickfalse从打印结果来看handleCick方法执行了两次，也是冒泡机制导致的。因此，在vue中可以使用事件修饰符stop来防止冒泡行为。其他vue事件修饰符有.prevent.stop.once.capture.self修改上面代码如下：
点我(^_^)这样，handleCick就可以了只会执行一次以达到我们的目标期望。参考：1、事件修饰符-官方2、vue-事件修饰符-详解-CSDN
