Vue事件修饰符（三）.self连缀

简介

        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)"触发了。

图1.self举例

连缀

        vue中事件修饰符时可以连缀的，修饰符的顺序有时会影响最终结果。例如prevent与self组合。如下图2,图3。prevent.self与self.prevent产生的结果是有差距的。self写在prevent前时，prevent会被self影响，只有我们直接点击这个目标时才会触发prevent。点击5号通过冒泡传递过来时，self拦截住了监听，后面的prevent也一起失效了。

图a.结果差别 图2.prevent.self 图3.self.prevent

        .stop也会因为连缀在self可能失效。

Vue事件修饰符（一）.stop .capture
Vue事件修饰符（二）.prevent .passive
Vue事件修饰符（三）.self连缀
Vue事件修饰符（四）.native .once （1月12日发）

前端豆知识，很小却有用