浅谈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 相关文章推荐
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
react 应用多入口配置及实践总结
Oct 17 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
npm 常用命令详解(小结)
Jan 17 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生成便于打印的网页
2006/10/09 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
js中的闭包学习心得
2018/02/06 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
Python中的localtime()方法使用详解
2015/05/22 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
应用电子技术专业个人求职信
2013/09/21 职场文书
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
校园招聘策划书
2014/01/09 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
汽车专业求职信
2014/06/05 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS