vue点击事件之@click.native

vue @click.native 原生点击事件：

1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用.native修饰符）

2，等同于在子组件中：

子组件内部处理click事件然后向外发送click事件：$emit("click".fn)

        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标签的原生监听器是一样的。所以当我们使 用组件时需要经常使用原型绑定 。

前端豆知识，很小却有用

---