浅谈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 wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
js 页面执行时间计算代码
Mar 04 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
Vue 表情包输入组件的实现代码
Jan 21 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容易忘记的知识点分享
2013/04/30 PHP
如何使用Strace调试工具
2013/06/03 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
js之onload事件的一点使用心得
2013/08/14 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
python os用法总结
2018/06/08 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
详解如何设置Python环境变量?
2019/05/13 Python
Python 导入文件过程图解
2019/10/15 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Python logging模块原理解析及应用
2020/08/13 Python
德国机车企业:FC-Moto
2017/10/27 全球购物
高一地理教学反思
2014/01/18 职场文书
医药个人求职信范文
2014/01/29 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
第二课堂活动总结
2014/05/07 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书