vue @click.native 绑定原生点击事件


Posted in Vue.js onApril 22, 2022

@click.native原生点击事件

给vue组件绑定事件时候

必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符)

等同于在自组件中

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

vue点击事件补充.native

发现vue中加载Element 之后 键盘事件无效果搜索之后发现有BUG特来修复

步骤

发现Element-input 中加入@keyup.enter中无效果

<el-input style="width:500px;" placeholder="请输入查询城市" v-model="location" clearable @keyup.enter="goSearch" ></el-input>

之后在加入.native 的修饰符

<el-input style="width:500px;" placeholder="请输入查询城市" v-model="location" clearable @keyup.enter.native="goSearch" ></el-input>

官网的解释

​你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。

通俗点讲:

就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加’. native’事件是无法触 发的。

可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有任何作用的。 

Vue.js 相关文章推荐
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
vue实现省市区联动 element-china-area-data插件
vue修饰符.capture和.self的区别
Apr 22 #Vue.js
vue 自定义组件添加原生事件
Apr 21 #Vue.js
vue 自定义的组件绑定点击事件
Apr 21 #Vue.js
vue组件vue-esign实现电子签名
Apr 21 #Vue.js
vue动态绑定style样式
Apr 20 #Vue.js
Vue OpenLayer测距功能的实现
You might like
4.与数据库的连接
2006/10/09 PHP
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
php SQL之where语句生成器
2009/03/24 PHP
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
token 机制和实现方式
2020/12/15 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
Python中的index()方法使用教程
2015/05/18 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
护士自我介绍信
2014/01/13 职场文书
网络营销策划方案
2014/06/04 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
2015年三万活动总结
2015/03/25 职场文书
在人间读书笔记
2015/06/30 职场文书
我爱我班主题班会
2015/08/13 职场文书
银行求职信怎么写
2019/06/20 职场文书
golang特有程序结构入门教程
2021/06/02 Python