原理篇---vue事件绑定

一、原生事件和组件事件的绑定

原生事件的绑定是通过addEventLister绑定给真实的元素的;组件事件绑定是通过vue自定义的$on实现的。如果要在组件上使用原生事件,需要加.native修饰符,这样就相当于在父组件中把子组件当做普通html标签,然后加上原生事件。

二、$on和$emit的实现

$on、$emit是基于订阅观察者模式的,维护一个事件中心,on的时候将事件按名称存在事件中心里,称之为订阅者,然后emit将对应的事件进行发布,去执行事件中心里的对应的监听器

1、vue先创建一个构造器,维护一个事件中心events

function EventEmiter(){
    this.events = {}
}

2、$on

EventEmiter.prototype.on = function(event,cb){
    if(this.events[event]){
        this.events[event].push(cb)
    }else{
        this.events[event] = [cb]
    }
}

3、$emit

EventEmiter.prototype.emit = function(event){
    let args = Array.from(arguments).slice(1)
    let cbs = this.events[event]
    if(cbs){
        cbs.forEach(cb=>{
            cb.apply(this,args)
        })
    }
}

 

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值