浅谈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 相关文章推荐
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 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 win下Socket方式发邮件类
2009/08/21 PHP
PHP中设置时区方法小结
2012/06/03 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
Python的动态重新封装的教程
2015/04/11 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python异常处理操作实例详解
2018/05/10 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
北京某公司的.net笔试题
2014/03/20 面试题
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
linux面试题参考答案(1)
2016/01/22 面试题
珍珠奶茶店创业计划书
2014/01/11 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
优秀经理获奖感言
2014/03/04 职场文书
门面房租房协议书
2014/08/20 职场文书
慰问信格式
2015/02/14 职场文书
民事辩护词范文
2015/05/21 职场文书