Vue事件修饰符（四）.native .once

简介

        Vue提供了事件绑定的语法糖，我们在标签中可直接使用形如v-on:click，@click，@focus的形式绑定事件监听器，并且可以使用修饰符对事件进行option设置。本次解释once修饰符以及native修饰符的情况。

once

        绑定once的监听器只会触发一次，在第一次触发后该监听器会被remove掉。很简单不多做解释了。

native

        我们可以称native为原型绑定。只有使用vue组件时我们会用到这个修饰符。当我们在组件上绑定监听时，我们绑定的是组件定义的监听。以element框架为例，<el-input>是element提供的组件。它在浏览器解析后是这样的。我们写<el-input @click="">时，这click绑定的是element给el-input定义的方法。我们其实把click绑定在了
div[class="el-input"]
上了。与直接在<input>上绑定是不同的，如果element没给el-input定义click (this.$emit('click'),function)组件需要这种方式才能定义click监听)，那么我们这次绑定是无效的。

图1.el-input组件标签

当我们加上native词缀，<el-input @click.native="">这样，我们就把click事件直接绑定在了原型上了，也就是绑定在
input[class="el-input__inner"]
上了。这是我们绑定的就和input标签的原生监听器是一样的。所以当我们使用组件时需要经常使用原型绑定。

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

前端豆知识，很小却有用