1.原生事件和组件事件的绑定

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

2.$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)
        })
    }
}

动力节点在线课程涵盖零基础入门，高级进阶，在职提升三大主力内容，覆盖Java从入门到就业提升的全体系学习内容。全部Java视频免费观看，相关学习资料免费下载!对于火爆技术，每周一定时更新!如果想了解更多相关技术，可以到动力节点在线免费观看Vue入门视频教程学习哦!