vue3的emit,vue v-on原理
本文主要介绍Vue中$on和$emit的实现原理分析，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
emit和关于Vue中发布和订阅模式的用法。首先，分析$on的原理和实现。有一点要记住，先定义，先触发，先分析，$emit，先做个断点。
Vue中发布订阅模式
在Vue中，采用发布-订阅模式，兄弟组件之间典型的通信是$on和$emit。
发布订阅模式：（订阅者、发布者、信号中心）
发布者$emit将事件发布到信号中心eventBus，订阅者$on通过信号中心接收事件并进行处理。
在此模拟自定义事件$on和$emit。
事件总线类{
构造函数(){
//1.处理与事件对应的处理函数。
this.sub={}
}
$on(事件，fn){
如果(！this.sub[event]){
//2.确定sub是否已经有了事件，如果没有，分配一个数组来存储触发函数。
this.sub[event]=[]
}
//3.将函数推送到相应的事件
这个事件。推动(fn)
}
$emit(事件){
if(this.sub[event]){
这个事件。forEach(fn={
Fn() //4。在相应的事件中执行处理功能。
})
}
}
}
//信号中心
const vm=新事件总线()
//订阅事件
Vm。$on(click ，()={ console . log( click事件被触发)})
VM。$ on(更改，()={console.log(更改事件被触发)})
//发布订阅
vm。$emit(click )
vm。$emit(change )
$emit和$on用法深挖
俗称e m i t和emit和emit等是消费和定义。我们用代码解释一下。
身体
div id=应用程序
按钮@click=添加测试/按钮
/div
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
消息：“好的”
},
已创建(){
这个。$on(我的事件，this.datalist)
},
方法：{
数据表(e){
console.log(this.message，e)；
},
add(){
这个。$emit(我的事件，你好吴)
}
}
});
/脚本
/body
首先剖析一下$on的原理实现
首先在创建时添加断点。
我们会发现他会跳到on的源代码里。
我们传入两个参数，第一个是我们事件的名称，第二个是我们事件处理方法对应的event和fn。
首先，他将这个传递给vm，然后判断事件是否是一个数组。如果是数组，他会循环赋值，继续执行on的迭代方法。如果不是数组进入else的逻辑判断，找出是否包含事件。如果没有，他会自己创建一个事件，设置为空数组，将新创建的处理函数推送到里面。这说明我们在定义一个事件的时候，可以同时为一个事件定义多个执行方法，最后找到定义的方法，返回定义第二个方法。参见代码var vm=new Vue({
埃尔： #app ，
数据：{
消息：“好的”
},
已创建(){
这个。$on(我的事件，this.datalist)
这个。$on(我的事件，this.datalist2)
},
方法：{
数据表(e){
console.log(this.message，e)；
},
数据列表2(e){
Console.log(我是第二种方法，e)；
},
add(){
这个。$emit(我的事件，你好吴)
}
}
});
定义多个执行方法也是可以的。
有一点要记住先定义的先触发
还有一点可以是数组，同样的处理方法绑定到不同的事件，如下面的代码所示
var vm=new Vue({
埃尔： #app ，
数据：{
消息：“好的”
},
已创建(){
这个。$on([我的事件，我的事件2]，this.datalist)
console.log(这个。_ events)；
//这个。$on(我的事件，this.datalist2)
},
方法：{
数据表(e){
console.log(this.message，e)；
},
数据列表2(e){
Console.log(我是第二种方法，e)；
},
add(){
这个。$emit(my_event2 ，你好吴)
}
}
});
换成第二个数组他还是可以实现的。
分析$emit
先打个断点
1 .发出源代码
2.关键步骤：先把名字改成小写，然后直接从我们vue实例中带下划线的events对象中取出事件对应的方法。如果什么都找不到，就回去。如果找到了，第一步就是判断cbs的长度能不能为1，因为它可能是一个数组。如果多个处理函数大于1，就变成数组，如果等于1，就直接返回cbs。
在第二步中，他处理参数并将下面的参数转换成数组。他不想要第一个，因为他用完了事件名称，然后他在cbs上循环播放。
这个函数是为了捕捉和处理异常，执行try catch，所以如果执行emit出现错误，他不会崩溃，会抛出错误。这个地方做得很好，最后返回res。
总结
通过源码可以事半功倍。
通过源代码分析，我们知道在定义on方法时，可以定义多个事件，将多个处理函数绑定到同一个事件，也可以是定义中的数组。
Trycate是在emit中处理的，所以当我们抛出异常时，不会中断整个程序而崩溃。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。