浅谈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一点特殊用法
May 28 Javascript
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
JQuery学习总结【二】
Dec 01 Javascript
canvas 实现中国象棋
Feb 17 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
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
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
VUE实现强制渲染,强制更新
2019/10/29 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
如何使用Python 打印各种三角形
2019/06/28 Python
在django中,关于session的通用设置方法
2019/08/06 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
培训主管的职业生涯规划
2014/03/06 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
借款民事起诉状范文
2015/05/19 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
python处理json数据文件
2022/04/11 Python