vue自定义组件添加原生事件监听
注：全局或局部注册的组件称为子组件，其中声明的组件名称（如下demo中的child）是一个自定义组件
Demo1-直接给父组件添加事件监听
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="root" @click="handleClick">
Child
</div>
<script>
Vue.component('child', {
template: '<div>Child</div>'
}) var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert(1);
}
}
})
</script>
</body>
</html>
Demo2-使用$emit()发布事件广播，然后父组件可以监听子组件向外触发的事件，并执相应方法即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="root">
<child @click="handleClick"></child>
</div>
<script>
Vue.component('child', {
template: '<div @click="handleChild">Child</div>',
methods: {
handleChild: function() {
this.$emit('click');
}
}
}) var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert(1);
}
}
})
</script>
</body>
</html>
注：但这种方式是给组件绑定自定义事件，而不是绑定原生事件且要触发2个事件，比较麻烦，此时需要使用demo3的方法
Demo3-直接使用事件修饰符native即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="root">
<child @click.native="handleClick"></child>
</div>
<script>
Vue.component('child', {
template: '<div>Child</div>'
}) var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
alert(1);
}
}
})
</script>
</body>
</html>
摘自：https://www.cnblogs.com/tu-0718/p/11196009.html
vue自定义组件添加原生事件监听的更多相关文章
- NO.08--VUE之自定义组件添加原生事件
前几篇给大家分享了我的业余的“薅羊毛”的经历,回归正题,讲回vue吧: 许多vue新手在工作开发中会遇到一个问题,直接使用 button 添加原生事件是没有问题的,但是使用自定义组件添加原生事件时,就 ...
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- vue怎么给自定义组件绑定原生事件
下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...
- Java Swing实战（四）按钮组件JButton及其事件监听
接下来为面板添加保存按钮,并为按钮绑定事件监听. /** * @author: lishuai * @date: 2018/11/26 13:51 */ public class WeimingSyn ...
- vue 给组件绑定原生事件
有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native.例如: <my-component v-on:click.native="doThe ...
- clipboard 在 vue 项目中，on 事件监听回调多次执行
clipboard 定义一个全局变量 import ClipboardJS from "clipboard"; if(clipboard){ clipboard.destroy() ...
- Java Swing实战（二）下拉菜单组件JComboBox及其事件监听
接下来给"数据源配置"面板添加下拉框. /** * @author: lishuai * @date: 2018/11/26 13:51 */ public class Weimi ...
- 关于vue事件监听的一个问题
由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...
- 事件监听addEventListener()和removeEventListener() ---------1
一直想写一个原生事件监听的记录,方便以后看,不愿意写主要是事件监听的单词太长,记起来好难记每次都要查,这次把知道的写完了,来这里查好了,以后要是理解的更透彻了,就再补全好了 首先,DOM0级事件和DO ...
随机推荐
- Splay平衡树入门小结
学习到这部分算是数据结构比较难的部分了,平衡树不好理解代码量大,但在某些情况下确实是不可替代的,所以还是非学不可. 建议先学Treap之后在学Splay,因为其实Splay有不少操作和Treap差不多 ...
- hive基础知识or基本操作命令
MySQL的密码是:123456 1.hive创建标准表(以后均可以按照这样创建): create [external] table [if not exists] records (year STR ...
- Java double转long方法
Java double转long方法 double random = Math.round(Math.random()*10000); long l = new Double(random).long ...
- Install packages failed: Installing packages: error occurred. ------简单的问题常常会被忽略
用 pip install 安装了wxpy这个库,但是使用的时候却报错:ImportError: No module named wxpy 我先用 pip list 查看了一下,发现这个库是已经存在的 ...
- 随手记--QT
设置toolButton按钮隐藏(可视化): ui->toolButton->setVisible(true); 改变按钮背景色: ui->toolButton->setSty ...
- mobx学习笔记02——mobx基础语法（class）
新的语法可能不被浏览器支持,可以使用babel转换为浏览器支持的代码格式: 为什么要定义class? js是一门面向对象的编程语言.需要利用类来复用代码,提高编程效率. 需要什么样的class能力? ...
- sql2008质疑处理方法
日常对Sql Server 2005关系数据库进行操作时,有时对数据库(如:Sharepoint网站配置数据库名Sharepoint_Config)进行些不正常操作如数据库在读写时而无故停止数据库,从 ...
- HDU 6038 Function —— 2017 Multi-University Training 1
Function Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total ...
- vue.js使用echarts一分钟简单入门
图表的使用在企业级软件中使用越来越普遍,前端开发人员可以使用常用的echarts开源库来进行图表展示的开发,公司最近提出需要丰富系统首页的内容,趁此机会分享一下如何在使用vue.js框架下使用echa ...
- Html代码查看器
Html代码查看器 效果: 分析: 1.连接网络需要权限 <uses-permission android:name="android.permission.INTERNET" ...