浅谈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中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
vue 中固定导航栏的实例代码
Nov 01 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
JS实现随机点名器
Apr 12 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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
Python  连接字符串(join %)
2008/09/06 Python
Scrapy框架使用的基本知识
2018/10/21 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
Python中的引用知识点总结
2019/05/20 Python
python数组循环处理方法
2019/08/26 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
python画图常规设置方式
2020/03/05 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
大学生职业生涯规划书
2014/03/14 职场文书
企业活动策划方案
2014/06/02 职场文书
图书室标语
2014/06/21 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL