组件绑定事件时

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==){
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==){
console.log('enter');
}
});
}
}
}
</script>

vue中组件绑定事件时是否加.native的更多相关文章

  1. vue中<select>绑定事件

    <div id="app"> <select v-model="selectItem" @change="selectFn($eve ...

  2. Vue--vue中的组件、组件绑定事件和数据、私有组件、子组件,父子组件参数互传

    一.公有组件以及组件的使用和特点 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. Vue中组件

    0828自我总结 Vue中组件 一.组件的构成 组件:由 template + css + js 三部分组成(.vue文件) 1)组件具有复用性 2) 复用组件时,数据要隔离 3) 复用组件时,方法不 ...

  4. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

  5. Vue中组件化编码使用(实战练习一)

    Vue中组件化编码的大致流程(初接触).组件之间的参数传递(最基础的形式).组件之间的配合完成一个需求 1.在Vue中进行组件化编码 1.1.组件化编码流程: (1).拆分静态组件:组件要按照功能点拆 ...

  6. vue中组件之间的通信

    一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式  props vue自定义的事件 消息订阅与发布 vuex sl ...

  7. JavaScript 绑定事件时传递数据

    var data = { name: 'Ruchee', email: 'my@ruchee.com' }; data.handleEvent = function (e) { console.log ...

  8. 在Vue中的load或ready的加载时机

    在Vue中的load或ready的加载时机 1.我们来插入一段代码来分析: Js代码如下 <script type="text/javascript"> var app ...

  9. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

    jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

随机推荐

  1. scipy 安装错误及解决

    pip 安装 scipy 时,因为是编译安装,所以如果缺少一些编译库,会报很多错误,以下总结可能缺失的安装包: sudo apt-get install gfortran sudo apt-get i ...

  2. nginx让所有的http地址重定向到https

    问:为什么让所有的http都重定向到https呢?答:因为这样会使网站更安全些. 那么我是如何在nginx配置,让输入http://www.youcongtech.com或者youcongtech.c ...

  3. item 23: 理解std::move和std::forward

    本文翻译自<effective modern C++>,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 根据std::move和std::forward不 ...

  4. NCC Meetup 2018 Shanghai 活动小结(含PPT与视频)

    NCC Meetup 2018 上海的活动于2018年6月30日在微软上海港汇办公室进行.原本计划30人规模的小型活动,结果收到了逾60人的报名,其中大部均来到现场参加了活动. 本次活动得到了微软公司 ...

  5. maven新建项目

    选择新建maven project  这个文件通常作为父工程,用于管理jar包的依赖,锁定jar包版本 选择next group id :如表面意思  组织名  公司名  artifact id :工 ...

  6. C++ string中的find()函数

    1.string中find()返回值是字母在母串中的位置(下标记录),如果没有找到,那么会返回一个特别的标记npos.(返回值可以看成是一个int型的数) #include<cstring> ...

  7. Graph Without Long Directed Paths CodeForces - 1144F (dfs染色)

    You are given a connected undirected graph consisting of nn vertices and mm edges. There are no self ...

  8. echarts x轴 增加滚动条

    charts x轴 增加滚动条 在option 配置项中添加 [ dataZoom 中配置 ] 设置x轴滚动条 效果图: 动态拖动 以下参考代码 dataZoom配置 官网写法 option = { ...

  9. 福州大学软件工程1816 | W班 第10次作业[个人作业——软件产品案例分析]

    作业链接 个人作业--软件产品案例分析 评分细则 本次个人项目分数由两部分组成(课堂得分(老师/助教占比60%,学生占比40%)满分40分+博客分满分60分) 课堂得分和博客得分表 评分统计图 千帆竞 ...

  10. html总结:背景图片拉伸

    两种方法: ⑴推荐方法 <style>body {background-image:url(images/backimage.jpg);background-size:cover;}< ...