浅谈vue中组件绑定事件时是否加.native


Posted in Javascript onNovember 09, 2019

组件绑定事件时

1. 普通组件绑定事件不能添加.native, 添加后事件失效

2. 自定义组件绑定事件需要添加.native, 否则事件无效

<template>
 <!-- <mt-field label="用户名" placeholder="请输入用户名"></mt-field> -->
 <input type="text" @keyup.native="show($event)"> //普通组件不能添加.native, 添加后事件失效
</template>

<script>
import { MessageBox } from 'mint-ui';

export default {
 name: 'about',
 data(){
 return{

 }
 },
 methods:{
 show(ev){
  MessageBox.alert('操作成功').then(action => {
  if(ev.keyCode==13){
   console.log('enter');
  }
  });
 }
 }
}
</script>
<template>
 <mt-field label="用户名" placeholder="请输入用户名" @keyup.native="show($event)"></mt-field> //自定义组件需要添加.native, 不添加事件无效
 <!-- <input type="text" @keyup.native="show($event)"> -->
</template>

<script>
import { MessageBox } from 'mint-ui';

export default {
 name: 'about',
 data(){
 return{

 }
 },
 methods:{
 show(ev){
  MessageBox.alert('操作成功').then(action => {
  if(ev.keyCode==13){
   console.log('enter');
  }
  });
 }
 }
}
</script>

以上这篇浅谈vue中组件绑定事件时是否加.native就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
读取input:file的路径并显示本地图片的方法
Sep 23 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 Javascript
Vue根据条件添加click事件的方式
Nov 09 #Javascript
浅谈vuex中store的命名空间
Nov 08 #Javascript
解决$store.getters调用不执行的问题
Nov 08 #Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 #Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 #Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 #Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 #Javascript
You might like
php防注
2007/01/15 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
Django 全局的static和templates的使用详解
2019/07/19 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
教室布置标语
2014/06/26 职场文书
新员工试用期自我评价
2015/03/10 职场文书
政审证明范文
2015/06/19 职场文书
运动会主持人开幕词
2016/03/04 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis