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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
领导干部培训感言
2014/01/23 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
普通党员对照检查材料
2014/08/28 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
优秀班集体申报材料
2014/12/25 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL