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

Posted 2023-04-02

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

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

        我们可以称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 设置事件捕获 ​

.self 只有当事件作用在元素本身才会触发 ​

.prevent 阻止默认事件，比如超链接跳转 ​

.once 事件只能触发一次

.native 触发js原生的事件 ​

.number 把文本框的内容转换为数字 ​

.trim 去除文本框左右空格

.keyup.enter ​

.keyup.space