$emit和$on用法深挖
2024-06-11 08:37:06
俗称的emit和emit和emit和on就是消费和定义,咱们在代码中讲解
<body><div id="app">
<button @click="add">测试</button></div><script>var vm = new Vue({el: '#app',data: {message:'ok'},created() {this.$on('my_event',this.datalist)},methods: {datalist(e){console.log(this.message,e);},add(){this.$emit('my_event','hello wu')}}});</script>
</body>
首先剖析一下$on的原理实现:
先在create加个断点
我们会发现他会跳到on的源码中
我们传入的参数是两个,第一个是我们事件的名称,第二个是我们事件处理方法对应的event和fn
- 首先他把this传给vm
- 然后判断event是不是一个数组,如果是个数组他就会以循环的方式进行赋值,继续执行on的迭代方法,如果不是数组进入else的逻辑判断去找他是不是包含了event,如果不包含他会自己创建个event设置成空数组,把新建的处理函数push进去,这说明我们在定义个事件的时候,是可以同时为一个事件定义多个执行方法,最后找到定义的方法并返回
- 定义第二种方法看代码
var vm = new Vue({el: '#app',data: {message:'ok'},created() {this.$on('my_event',this.datalist)this.$on('my_event',this.datalist2)},methods: {datalist(e){console.log(this.message,e);},datalist2(e){console.log('我是第二种方法',e);},add(){this.$emit('my_event','hello wu')}}});
说明定义多个执行方法也是没问题的
有一点要记住先定义的先触发
还有一个点他是可以是个数组,在不同的事件绑定同一个处理方法,如下代码
var vm = new Vue({el: '#app',data: {message:'ok'},created() {this.$on(['my_event','my_event2'],this.datalist)console.log(this._events);// this.$on('my_event',this.datalist2)},methods: {datalist(e){console.log(this.message,e);},datalist2(e){console.log('我是第二种方法',e);},add(){this.$emit('my_event2','hello wu')}}});
换成第二个数组他还是可以实现
分析$emit
先打个断点
- emit的源码
2关键的一步:先通过名称改成小写后然后直接从我们vue实例下划线events这个对象当中拿出事件对应的方法,如果找不到什么都不做,直接返回回来,找的话,第一步先判断cbs的长度打不打与1,因为他有可能是个数组,多个处理函数如果大于一就变成了一个数组,如果等于一的话直接返回cbs.
第二步他对arguments做了处理把后面的参数变成数组,第一个不要了 ,因为事件名称他用完了,紧接着他对cbs做了个循环,
这个函数是捕获处理异常,执行try catch,所以说如果执行emit出了错误他不会崩溃,会抛出错误,这个地方做的还不赖 最后把res返回
总结
可以通过源码去理解事半功倍噢
通过源码分析我们会知道on方法在定义的时候他可以定义多个事件,也可以为同个事件绑定多个处理函数,在定义中还可以是数组
在emit当中进行trycate的处理,所以我们抛出异常的时候我们不会中断整个程序而崩溃
最新文章
- 利用CxImage实现编解码Gif图像代码举例
- 二叉树的层序遍历_NC15 求二叉树的层序遍历
- python3.8.2安装教程-Python3.8.2 软件介绍(附安装包)
- 那一年,整个游戏界差点因为一款垃圾游戏,而一同被“埋葬”
- mq多个消费者消费一个消息_ActiveMQ多个消费者消费不均匀问题
- javaScript变量、作用域链
- html比赛项目,趣味运动会最新个人比赛项目
- python没有requests模块_python没有名为“requests”的模块
- BUUCTF刷题-RAR 压缩包暴力破解密码
- 谈一谈我使用AI得贤招聘官的AI面试体验之旅
- 一般信道容量迭代算法c语言,(信息论编码)信道容量迭代算法
- 消息中间| JAVA消息中间件概述
- angular报$injector / unpr的错误
- javascript 0基础入门
- oracle数据库归档模式修改ARCHIVELOG
- 【JZOJ B组】幸运数
- AndroidStudio实现相机拍照或从相册中选取照片并显示
- 微信公众号 java发送消息_微信公众号发送模板消息 Java实现。
- 视频捕获:预览、截图、录像(MP4 软/硬编码)、推流,一网打尽
- 坯子库插件安装完以后搜不到里面的插件_SketchUp坯子库管理器
热门文章
- Linux内核部件分析 设备驱动模型之device
- per_cpu机制的详解
- shell判断文件与字符串
- Web安全之SQL注入攻击技巧与防范
- 设A为n阶非零矩阵,且A^2=A. r(A)=r (0<r<n) 求|5E+A|
- 设计递归算法,删除不带头结点的单链表L中所有值为X的结点
- oracle optimizer_index_cost_adj,OPTIMIZER_INDEX_COST_ADJ与成本计算
- java trim 换行符_JAVA去掉字符串左右两边的回车、空格、制表符、换行符
- python 将图片旋转多个角度_用Python玩转PDF的各种骚操作
- 依赖的包_运维丨python安装mysql的依赖包mysqlpython操作