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 ...
随机推荐
- 【串线篇】Mybatis拓展之MBG
MBG-逆向工程 一.介绍 MBG:MyBatis Generator:代码生成器: MyBatis官方提供的代码生成器:帮我们逆向生成: 正向: table----javaBean---BookDa ...
- torchvision.transforms模块介绍
torchvision.transforms模块 官网地址:https://pytorch.org/docs/stable/torchvision/transforms.html# torchvisi ...
- 洛谷4721 【模板】分治 FFT
传送门 久违的多项式全家桶= =+ 分治NTT 用的就是cdq分治的思想 对于当前递归到的区间[l,r] 我们处理出[l,mid]对[mid+1,r]答案的贡献 然后分治递归求解就可以啦qwq 这个贡 ...
- MVC模式设计的Web层框架初识
struts是个什么东西? struts是一个按MVC模式设计的Web层框架,其实它就是一个大大的servlet,这个Servlet名为ActionServlet,或是ActionServlet的子类 ...
- 【python实例】统计字符串里大写字母，小写字母的个数和非字母的个数
""" 给定一个以下字符串:统计大写字母的个数,小写字母的个数,非字母的个数. str1 = "ajdkkKDKEK1343KFKiriromfkfKKRIOW ...
- js 最短代码生成随机数(字符串、id)
以生成8位字符串为例 Math.random().toString(36).substr(-8)
- vue cli3以上的项目中如何使用axois请求本地json文件
首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...
- 2，Spring MVC 学习总结（二）- 方法（Action）参数映射
一,Controller层方法(Action)参数映射 1,自动参数映射 1.1,基本数据类型参数映射 方法的参数可以是任意基本数据类型,如果方法参数名与http中请求的参数名称相同时会进行自动映射. ...
- BZOJ 2694: Lcm 莫比乌斯反演 + 积性函数 + 线性筛 + 卡常
求 $\sum_{i=1}^{n}\sum_{j=1}^{m}lcm(i,j)\mu(gcd(i,j))^2$ $\Rightarrow \sum_{d=1}^{n}\mu(d)^2\sum_{i ...
- 七、单例设计模式共享数据分析、解决、call_once
一.设计模式大概谈 代码的一些写法,与常规的写法不太一样,程序灵活,维护起来很方便,但是别人接管.阅读代码很痛苦. 用设计模式理念写出来的代码很晦涩.<< head first>&g ...