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 25 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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
转换中文日期的PHP程序
2006/10/09 PHP
mysql 性能的检查和优化方法
2009/06/21 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
python遍历目录的方法小结
2016/04/28 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
劳动工资科岗位职责范本
2014/03/02 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
文化产业实施方案
2014/06/07 职场文书
八一建军节演讲稿
2014/09/10 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
Nginx的基本概念和原理
2022/03/21 Servers
使用Django框架创建项目
2022/06/10 Python