浅谈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 相关文章推荐
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
JS控制输入框内字符串长度
May 21 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
小程序实现背景音乐播放和暂停
Jun 19 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脚本的测试方法
2015/08/05 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
python 监控logcat关键字功能
2020/09/04 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
一个SQL面试题
2014/08/21 面试题
会计电算化个人求职信范文
2014/01/24 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
高中学校对照检查材料
2014/08/31 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
详解Python函数print用法
2021/06/18 Python