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 ...
随机推荐
- linux100day（day5）--编程原理和shell脚本
通过前面的学习,我们对于linux文件系统有了一定的了解,我们接下来会初步接触编程原理和尝试编写shell脚本来实现功能. day05--编程原理和shell脚本初步认识 编程原理 在早期编程中,因为 ...
- wait()和sleep()、sleep()和yield()的区别
wait()和sleep()的区别主要表现在一下几个方面: 原理不同.sleep()方法是Thread类的静态方法,是线程用来控制自身流程的.它会使线程暂停执行一段时间,把执行机会让给其他线程,等到时 ...
- java 字符串的截取、转换、分割
1.截取 package java07; /* 字符串的截取方法: public String substring(int index):截取从参数位置一直到字符串末尾,返回新字符串 public S ...
- Python中类
1.类的方法与普通的函数只有一个特别的区别——它们必须有一个额外的第一个参数名称, 按照惯例它的名称是 self,self代表类的实例,而非类. self 不是 python 关键字,我们把他换成 r ...
- objc_setAssociatedObject 关联对象
使用场景:在分类中,不允许创建实例变量,这里就解决了此问题 参考: https://www.cnblogs.com/someonelikeyou/p/7162613.html 属性的实质:就是实例变量 ...
- 谷歌SEO和百度SEO的区别
远程桌面连接 一直有一个现象:关于谷歌优化或只是以谷歌为例谈SEO观点或技术时,经常有读者说,不适用于百度,希望多看到关于百度SEO的帖子上一篇利用规范的标签在谷歌排名中陷害竞争对手的帖子,就有好 ...
- 27 October in ss
Contest A. chrono 计算某年的干支纪年法年份. Too easy. 然而我忘记 C++ 取模运算是向0取整.然而数据太水,还是有 90 分. B. clock 计算某时刻时针和分针的夹 ...
- ACM中java的使用 (转)
ACM中java的使用 这里指的java速成,只限于java语法,包括输入输出,运算处理,字符串和高精度的处理,进制之间的转换等,能解决OJ上的一些高精度题目. 1. 输入: 格式为:Scanner ...
- php与js互相调用
php中调用js <?php echo '<script>var yearid=$("#yearId").val()</script>'; echo ...
- PHP常用
php.ini文件配置 时间配置PRC中国 date.timezone = PRC 文件上传file_uploads = On //支持http上传upload_tmp_dir = //临时文件保存路 ...