浅谈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 相关文章推荐
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 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
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
php获取url参数方法总结
2014/11/13 PHP
PHP异常处理浅析
2015/05/12 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
php数据访问之增删改查操作
2016/05/09 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
JS重载实现方法分析
2016/12/16 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
写自荐信有哪些不宜?
2013/10/17 职场文书
计算机系毕业生推荐信
2013/11/06 职场文书
高中体育教学反思
2014/01/29 职场文书
建筑工地质量标语
2014/06/12 职场文书
中国梦读书活动总结
2014/07/10 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
检讨书怎么写
2015/05/07 职场文书
汉字听写大会观后感
2015/06/12 职场文书
运动员加油词
2015/07/18 职场文书
生产车间管理制度
2015/08/04 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript