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 26 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue里使用create, mounted调用方法
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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
JavaScript 字符编码规则
2009/05/04 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
python离线安装外部依赖包的实现
2020/02/13 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
大四学生毕业自荐信
2013/11/07 职场文书
企业管理培训感言
2014/01/27 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
员工聘用合同范本
2015/09/21 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
详解OpenCV曝光融合
2022/04/29 Python