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 组件注册全解析
Dec 17 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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中SQL注入攻击与XSS攻击
2012/06/10 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
jQuery知识点整理
2015/01/30 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
python能做哪方面的工作
2020/06/15 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
工作失误检讨书范文大全
2014/01/13 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
小学生校园广播稿
2014/09/28 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
导游词格式
2015/02/13 职场文书
法律意见书范文
2015/05/20 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python