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监听),那么我们这次绑定是无效的。
当我们加上native词缀,<el-input @click.native="">这样,我们就把click事件直接绑定在了原型上了,也就是绑定在
input[class="el-input__inner"]
上了。这是我们绑定的就和input标签的原生监听器是一样的。所以当我们使用组件时需要经常使用原型绑定。
Vue事件修饰符(一).stop .capture
Vue事件修饰符(二).prevent .passive
Vue事件修饰符(三).self连缀
Vue事件修饰符(四).native .once