浅谈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 相关文章推荐
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
javascript实现禁止复制网页内容
Dec 16 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python的迭代器和生成器
2015/07/29 Python
基于Python实现文件大小输出
2016/01/11 Python
python 实时遍历日志文件
2016/04/12 Python
深入理解Python中的*重复运算符
2017/10/28 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
新闻专业个人求职信
2013/12/19 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
店面出租协议书范本
2014/11/28 职场文书
公务员政审材料
2014/12/23 职场文书
检察院起诉意见书
2015/05/20 职场文书
信仰纪录片观后感
2015/06/08 职场文书
教师节联欢会主持词
2015/07/04 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript