浅谈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学习笔记7 原型链的原理
Jan 11 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
js实现日历
Nov 07 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
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读取纯真ip数据库使用示例
2014/01/26 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
自己开发Dojo的建议框架
2008/09/24 Javascript
Cookie 注入是怎样产生的
2009/04/08 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
2016/06/22 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
茶叶店创业计划书范文
2014/01/19 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
社会实践的活动方案
2014/08/22 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
房产证明范本
2015/06/19 职场文书
被委托人身份证明
2015/08/07 职场文书
小学班主任工作随笔
2015/08/15 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript