vue中的事件监听之——v-on vs .$on
跟着视频中老师的教学视频学vue的时候，看很多时候都用@(v-on)来监听子级emit的自定义事件，但在bus总线那块，又用.$on来监听bus自身emit的事件，v-on之间似乎相似但又不同，今天对照vue官网api学习并coding了相关代码，两者的用法与比较描述如下。
| v-on | vm.$on |
|
可监听普通dom的原生事件； 可监听子组件emit的自定义事件； |
监听当前实例的自定义事件 |
vue官网相关说明截图：
由此可见，想监听vue实例自身自定义事件，只能用.$on并且这是vue实例的方法，不能用在普通dom上；
v-on用在在普通dom标签上，可以监听原生事件；用在vue组件标签上，可以监听子组件emit的自定义事件；
具体代码实践如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--监听子组件emit的自定义事件-->
<child @change="handleChange">child1</child>
<child @change="handleChange">child2</child>
<child @change="handleChange">child3</child>
</div>
</body>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
var Child = {
template:`<div @click='handleClick'>
<slot></slot>
</div>`,
methods:{
handleClick(){
this.$emit( 'change' );
}
},
mounted(){
//监听当前实例的自定义change事件
this.$on( 'change',function(){
console.log( 'child-change-event-handler' );
} );
} };
var vm = new Vue({
el:'#app',
components:{
Child,
},
methods:{
handleChange(){
console.log( 'parent-change-event-handler' );
},
handleClick(){
console.log( 'handleClick' );
}
},
mounted(){
this.$on( 'change',this.handleChange );
}
});
</script>
</html>
通过上述代码实例可知，一个组件实例的定义事件既可以通过.$on被自身捕获，也可以通过v-on被父级捕获。事件想要传到父级组件，必须用emit进行bubble处理。
vue中的事件监听之——v-on vs .$on的更多相关文章
- vue中输入框事件监听 v-on:input
<van-field v-model="inputVal" v-on:input="search" />
- vue中的数据监听以及数据交互
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...
- 在vue中使用watch监听对象或数组
最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...
- jQuery中的事件监听方式及异同点
jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...
- [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】
1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...
- Javascript事件模型系列（三）jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- Java中的事件监听机制
鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动 ...
- jQuery中的事件监听小记
一,一个事件监听的简便写法 最近发现一个jQuery中事件监听的简洁写法,感觉方便好多.同时也深感自己基础薄弱,好多东西竟然都模棱两可.因此,记录的同时,也对jQuery事件监听做个小的总结 原文链接 ...
- 简单剖析Node中的事件监听机制（一）
使用js的class类简单的实现一个事件监听机制,不同于浏览器中的时间绑定与监听,类似于node中的时间监听,并且会在接下来的文章中去根据自己的理解去写一下Event模块中的原理. Node.js使用 ...
随机推荐
- VM 下安装ghost版系统
一.首先分区,并激活主分区 二.设置cd-rom的接口为IDE(这项看情况来设置,如果提示 "units specified don't exist, SHSUCDX can't insta ...
- GCD深入理解（1）
写在前面 本文原文为raywenderlich的<grand-central-dispatch-in-depth-part-1>:顺便提及一下,笔者认为,对于iOS初学者而言,raywen ...
- Sublime Text3配置自动联想python
1.安装Package Control 通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码 Sublime Text 3 ...
- PhpStorm比较高级的一些设置
开始使用phpstorm工具,总体感觉还是不错的.有点不舒服的就是他占用内存比较高,反应速度有时会卡,这跟他的功能强大有关系.有些功能对于 我来说是不怎么需要的,比如自动保存功能,会频繁的保存一些文件 ...
- ORACLE PL/SQL 实例精解之第二章 通用编程语言基础
通用编程语言基础 2.1PL/SQL编程基础 1. 字符类型:支持四中类型字符:字母,数字,符号和空格,组合一个或多个字符就会创建一个词汇单元 2. 词汇单元 a.标识符必须以字符开头 b.保留字是p ...
- 51nod1270 【dp】
思路: dp[i][0]代表第i个位置取1,dp[i][1]代表第i个位置取b[i]. #include <bits/stdc++.h> using namespace std; type ...
- 《编译原理》-用例题理解-自顶向下语法分析及 FIRST，FOLLOW，SELECT集，LL(1)文法
<编译原理>-用例题理解-自顶向下语法分析及 FIRST,FOLLOW,SELECT集,LL(1)文法 此编译原理确定某高级程序设计语言编译原理,理论基础,学习笔记 本笔记是对教材< ...
- PHP数组直接相加和array_merge的区别
array_merge是很常用的数组合并函数,但是两个数组直接相加对开发也是很有帮助的,两者之间有什么差别,这里记录一下: 首先是以数字为索引 array_merge会将两个数组按照先后顺序组成一个新 ...
- USB转串口 FT232/PL2303芯片使用体会
现在笔记本上很少带有串口了,而串口又是做电子设计必备的通讯接口之一,好在USB转串口比较方便,市面上常用的USB转串口芯片有很多,最常见的有FT232.PL2303.CH340三种 原理:单片机的TX ...
- bzoj 4860 [BeiJing2017]树的难题
题面 https://www.lydsy.com/JudgeOnline/problem.php?id=4860 题解 点分治 设当前重心为v 假设已经把所有边按照出发点第一关键字, 颜色第二关键字排 ...