el-input无法绑定键盘事件?浅析.native修饰符的作用与原理(绊脚石系列)

在开始说明为什么el-input无法绑定键盘事件之前,我们需要一点铺垫

native介绍

我们在使用vue进行开发时,会有很多不同的组件,它们作为一个个标签填充在template模板中,你是否想过,这些组件既然是标签,那么它们能否监听html标签的各种事件呢?

结果是不能,原因在于这些组件虽然看上去和html标签一样,用法也和html标签一样,但实际上,它们只是子组件中真实html标签的一个载体而已,并不存在于真实dom中,既然不存在于真实dom中,那么当然也不能监听html标签的原生事件啦。

针对这种情况,Vue给我们提供了一个事件修饰符:.native ,它允许我们在自定义的组件标签中添加原生的DOM事件。

<template>
  <div>
    <!-- 组件直接绑定click事件,Vue会把click视为一个自定义事件 无法通过点击触发 -->
    <MyComponent @click="handleClick()"></MyComponent> 
    <!-- 添加.native事件之后,Vue就可以识别出来这是一个原生的DOM事件:click事件 -->
    <MyComponent @click.native="handleClick()"></MyComponent> 
  </div>
</template>

el-input为什么无法绑定键盘事件?

如果你认真看完了上面的铺垫知识,其实答案已经出来了:<el-input>标签其本质上是一个组件。

想想看,我们在刚刚学习html标签的时候,什么时候学过这种不守浏览器道的奇怪标签?很明显,<el-input>实际上就是一个组件,它被解析成html结构是这样的:

我们给<el-input>添加@keydown事件时,keydown只能被解析为自定义事件,我们需要通过$emit手动触发该事件的回调函数才行。

而.native修饰符,就是为了这种情况而出现的,当我们使用了此修饰符后,vue会帮我们给组件的根标签添加一个事件监听器,我们便可以正常使用该事件了。

所以解决方法就是:在<el-input>绑定@keydown事件时,添加.native修饰符即可。

同理,其他的element组件也是可以用这个方法来绑定原生DOM事件的。也许你还有疑问:那为什么<el-button>的@click事件就不用.native 修饰符呢?

答案也很简单,因为人家在创建组件时就为<el-button>里面的<button>标签绑定了一个click事件,相当于是官方提前为我们准备好了一个click接口,我们看似是在调用原生js的click事件,实际上是在调用element官方为我们提前准备好的方法。

总结

  1. <el-input>本质是一个组件,所有组件都无法直接绑定原生DOM事件,elementUI可以直接写click等原生事件其实是因为ele官方为我们提前预置了一些相关事件。(没有预置的我们就无法直接绑定相关事件了,正如 <el-input> 没有预置keydown事件)
  2. 想要为组件标签绑定原生DOM事件,需要用到 .native 修饰符,其原理是Vue内部为组件的根标签中绑定了一个事件侦听器。
  3. .native是Vue官方专门为组件标签准备的语法,所以 .native 不能用在 非组件标签 上,否则会引发 warn 警告,并且该事件会失效。

猜你喜欢

转载自blog.csdn.net/Andye11/article/details/126967680