Vue事件修饰符(三).self连缀
2019-01-11 本文已影响0人
苏茶茉芳_亚泽伊
简介
Vue提供了事件绑定的语法糖,我们在标签中可直接使用形如v-on:click,@click,@focus的形式绑定事件监听器,并且可以使用修饰符对事件进行option设置。本次解释self修饰符以及self连缀的情况。
self
self 的作用是,只在目标Dom是绑定了动作的Dom才触发。栗子如下图。我给2号图层的捕获监听与3号图层的冒泡监听加上self修饰符。当我点击最里层的a标签时,控制台会输出1 3 4 4 2 1 。因为我们本次的目标Dom是4号a标签,所以我们绑定在2号与3号的监听在有self修饰时不触发。
同理当我们点击3号图层时,控制台会输出1 3 3 2 1 。这时,3号是目标Dom所以@click.self="log(3)"触发了。
![](https://img.haomeiwen.com/i15214039/44b2a3cdb261b3d5.png)
连缀
vue中事件修饰符时可以连缀的,修饰符的顺序有时会影响最终结果。例如prevent与self组合。如下图2,图3。prevent.self与self.prevent产生的结果是有差距的。self写在prevent前时,prevent会被self影响,只有我们直接点击这个目标时才会触发prevent。点击5号通过冒泡传递过来时,self拦截住了监听,后面的prevent也一起失效了。
![](https://img.haomeiwen.com/i15214039/7de580b3acf0f6c1.png)
![](https://img.haomeiwen.com/i15214039/1311ff1a83dba165.png)
![](https://img.haomeiwen.com/i15214039/da743a4fb836cbd2.png)
.stop也会因为连缀在self可能失效。
Vue事件修饰符(一).stop .capture
Vue事件修饰符(二).prevent .passive
Vue事件修饰符(三).self连缀
Vue事件修饰符(四).native .once (1月12日发)