探究element-ui 2.15.8中<el-input>的keydown事件无效问题

一、问题描述

今天看到一个问题,在用Vue2+element-ui 2.15.8开发时,使用input组件绑定keydown事件没有任何效果。

<template><div id="app"><el-input v-model="content" placeholder="请输入"  @keydown="handelKeydown"/></div>
</template><script>
export default {data() {return {content: ''}},methods: {handelKeydown() {console.log('触发了Keydown事件!!!') // 实际不会触发}}
}
</script>

二、问题排查

我们直接调试代码,找到Vue2中事件初始化的地方initEvents

在这里插入图片描述
在这里插入图片描述

可以看到,我们的keydown事件其实是有记录到的,那么事件绑定的关键就在updateComponentListeners

在这里插入图片描述

在这里有两句代码很关键:

target$1 = vm;target$1 这个变量后面会提到,它就是vm,我们<el-input>组件的实例对象。
updateListenersupdateComponentListeners实际内部调用的事件更新处理,它里面如何执行,我们往下看:

在这里插入图片描述

可以看到,updateListeners里实现事件绑定的逻辑是在add函数内:

在这里插入图片描述
在这里我们再次看到了 target$1变量,从而keydown事件其实就是绑定在它上面了。

那么如果要使得keydown事件能够正常触发,<el-input>组件内部在<input>上应该要有@keydown,并$emit('keydown')。于是,到<el-input>组件源码内看看到底有没有这个:

在这里插入图片描述
可以看到<el-input>组件并没有绑定keydown事件。

接下来,修改一下它的源码来验证一下:

在这里插入图片描述
在这里插入图片描述

这时候不要直接去调试,如果直接修改源码后调试会发现没有任何效果,即使你重新启动服务。原因在于,加载的Element-UI目标文件并不是源码文件:

在这里插入图片描述

也就是,在main.js中使用的import Element from 'element-ui'导入的其实是node_modules\element-ui\lib\element-ui.common.js

所以这里我们还要再修改一下main.js

import Element from 'element-ui'替换成下面的代码:

import Element from 'element-ui/src/index'

最后我们yarn serve重启一下服务,来验证一下:

在这里插入图片描述

三、解决方案

在实际开发中,不用去修改element-ui的源码也能使keydown事件生效,这里需要用到Vue的事件修饰符:navtive

修改一下代码:

<el-input v-model="content" placeholder="请输入"  @keydown.native="handelKeydown"/>

在这里插入图片描述

同样可以看到它生效了。

这里你可能有疑问,native为何能使keydown生效了呢?我们简单看一下:

在这里插入图片描述
在这里插入图片描述

可以看到:

给普通vnode创建完dom后、和createChilren后,会调用invokeCreateHooks函数,这里面会执行属性、事件、指令等的create钩子函数(注意不是组件实例的create钩子函数)。

在事件的create钩子函数中,会调用updateDomLIsteners方法的updateListeners方法,因为是创建阶段,所以又会调用add方法,使用target.addEventListeners给目标真实dom元素添加监听事件。

另:

在最后调试的过程中,在invokeCreateHooks函数内,你可能会好奇:cbs.create[i_2]指向updateDOMListeners,这个是怎么来的呢?

在这里插入图片描述

关于这个其实来自于下面的代码:

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/582178.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【中小型企业网络实战案例 四】配置OSPF动态路由协议

【中小型企业网络实战案例 三】配置DHCP动态分配地址-CSDN博客 【中小型企业网络实战案例 二】配置网络互连互通-CSDN博客 【中小型企业网络实战案例 一】规划、需求和基本配置_大小企业网络配置实例-CSDN博客 配置OSPF 由于内网互联使用的是静态路由&#xff0c;在链路出…

如何快速下载huggingface模型

Huggingface国内开源镜像 https://hf-mirror.com/ 上面总结了多种从Huggingface上下载模型的方法&#xff0c;如下图。 方法一&#xff1a;使用huggingface官网提供的huggingface-cli工具 官方详解地址https://huggingface.co/docs/huggingface_hub/guides/download 1. 安装…

C#中,unsafe、fixed和checked关键字

在C#中&#xff0c;unsafe、fixed和checked关键字都是用来控制代码执行和内存访问的。下面我将分别解释这三个关键字的作用。 unsafe unsafe关键字用于声明不安全的代码块。在C#中&#xff0c;默认情况下&#xff0c;代码是安全的&#xff0c;这意味着它遵循.NET的安全规则&a…

P8780 [蓝桥杯 2022 省 B] 刷题统计

题目描述 小明决定从下周一开始努力刷题准备蓝桥杯竞赛。他计划周一至周五每天做 a 道题目&#xff0c;周六和周日每天做 b 道题目。请你帮小明计算&#xff0c;按照计划他将在第几天实现做题数大于等于 n 题? 输入格式 输入一行包含三个整数 a,b 和 n. 输出格式 输出一个…

Arduino中手写脉冲控制步进电机-2

目录 1、前言 2、时间-位移关系计算 3、Matlab计算时间和位置数据 (1)Matlab程序 &#xff08;2&#xff09;Arduino程序 4、Matlab生成Arduino电机正反转程序语句 &#xff08;1&#xff09;Arduino程序 &#xff08;2&#xff09;Matlab 命令行方式生成Arduino步进电…

【Unity自制手册】基于Unity中物体移动相关方法和API集锦(动图详解)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

快速排序回顾及相关题型

快速排序 基本思想 快排的本质其实是分治算法 分&#xff1a;先选定一个数作为基准点x&#xff0c;将所有小于x的数放到x的左边&#xff0c;将所有大于x的数放到x的右边。将所有的数按照此法分成左右两个区间。 治&#xff1a;递归调用左右两个区间&#xff0c;对左右两个区…

IPEmotion数据采集软件功能介绍

IPEmotion作为IPETRONIK的软件产品&#xff0c;主要应用于车辆测试和不同的实验室测试系统&#xff0c;能够满足各种测量需求。通过专业化的数据采集软件IPEmotion&#xff0c;我们可实现完整的数据采集过程&#xff0c;包括&#xff1a;配置数据采集设备&#xff1b;使用不同的…

SD-WAN企业组网的核心要点

随着企业网络需求的不断演进和全球化业务的扩张&#xff0c;SD-WAN&#xff08;软件定义广域网&#xff09;作为一种先进的网络架构技术&#xff0c;逐渐成为企业组网的首选方案。SD-WAN通过提供更灵活、高效和安全的网络连接&#xff0c;帮助企业轻松应对不同地区和业务需求。…

计算机毕业设计---ssm+mysql+jsp实现的校园二手市场交易平台源码

项目介绍 本系统主要实现的功能有&#xff1a; 前台&#xff1a;&#xff08;1&#xff09;二手物品信息查看、搜索。 &#xff08;2&#xff09;学生注册登录、个人信息修改。 &#xff08;3&#xff09;二手物品信息发布、编辑。 &#xff08;4&#xff09;二手物品评论、回…

snap7西门子通讯 官方方法

官方文档 Util — python-snap7 0.0rc0 documentation 不用struct.unpack解析 Python使用python-snap7实现西门子PLC通讯-CSDN博客 python使用Snap7读写西门子S7系列PLC_python写入数据到s7-300db块-CSDN博客

【Unity细节】为什么按下移动键之后,物体还是会滑行一段距离(阻力都无穷大了)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 &#x1f636;‍&#x1f32b;️收录于专栏&#xff1a;unity细节和bug &#x1f636;‍&#x1f32b;️优质专栏 ⭐【…

内存满了无法开机(Ubuntu)

文章目录 在开机界面长按“shift”进入进入shell命令模式详细步骤选择Recovery Menu删除不需要的文件 在开机界面长按“shift”进入 进入shell命令模式详细步骤 选择Recovery Menu 删除不需要的文件 自己看着办吧

STM32 IIC开发学习

1IIC总线时序图 ① 起始信号 当 SCL 为高电平期间&#xff0c;SDA 由高到低的跳变。起始信号是一种电平跳变时序信号&#xff0c;而不是 一个电平信号。该信号由主机发出&#xff0c;在起始信号产生后&#xff0c;总线就会处于被占用状态&#xff0c;准备数据 传输。 ② 停止信…

Android 8.1 设置USB传输文件模式(MTP)

项目需求&#xff0c;需要在电脑端adb发送通知手机端接收指令&#xff0c;将USB的仅充电模式更改成传输文件&#xff08;MTP&#xff09;模式&#xff0c;便捷用户在我的电脑里操作内存文件&#xff0c;下面是我们的常见的修改方式 1、android12以下、android21以上是这种方式…

腾讯云轻量应用主机与云服务器功能、性能区别对比总结

腾讯云轻量服务器和云服务器CVM该怎么选&#xff1f;不差钱选云服务器CVM&#xff0c;追求性价比选择轻量应用服务器&#xff0c;轻量真优惠呀&#xff0c;活动 https://curl.qcloud.com/oRMoSucP 轻量应用服务器2核2G3M价格62元一年、2核2G4M价格118元一年&#xff0c;540元三…

事务的简介

一、什么是事务 事务是一组数据库的操作序列&#xff0c;包含一个或多个sql操作命令&#xff08;增删改&#xff09;&#xff0c;事务将所有的操作命令看做一个不可分割的整体&#xff0c;向数据库系统提交或撤销操作&#xff0c;所有操作要么执行要么不执行。 ●事务是一种机…

Go语言学习第一天

Go语言简介 go语言的特性&#xff1a; 一个目录下的同级文件属于同一个包。 包名可以与其目录名不同 &#xff1f;。 main包是Go语言程序的入口包&#xff0c;一个Go语言程序必须有且仅有一个main包&#xff0c;如果一个程序没有main包&#xff0c;那么编译事就会出错&#x…

VR全景图片制作时有哪些技巧,VR全景图片能带来哪些好处

引言&#xff1a; VR全景图片是通过虚拟现实技术制作出的具有沉浸感的图片&#xff0c;能够提供给用户一种身临其境的感觉。在宣传方面&#xff0c;它有着独特的优势和潜力&#xff0c;能够帮助吸引更多的潜在客户&#xff0c;那么VR全景图片制作时有哪些技巧&#xff0c;VR全…

出版实务 | 工具书

文章目录 字典、词典字典、词典的组织结构常用字典、词典介绍目前最常用、最通行的小型字典&#xff1a;《新华字典》常用的大型字典&#xff1a;《汉语大字典》最常用的中型词典&#xff1a;《现代汉语词典》常用的大型词典&#xff1a;《辞海》《辞源》《汉语大词典》 百科全…