发布订阅模式

在Vue中，父组件向子组件传值，使用props；子组件向父组件传值，使$emit()。下面是我在学习过程中，学会的Vue$emit()原理（发布订阅模式）；原理如下：

        class EventEimtter {
            constructor() {
                //事件队列
                this.cache = {}
            }

            on(name,fn){
                // 如果cache中存在监听的方法，则把方法push进数组里面
                if(this.cache[name]){
                    this.cache[name].push(fn)
                }else {
                // 如果是第一次监听此方法，则直接放进数组里
                    this.cache[name] = [fn]
                }
            }
            off(name,fn){
                let tasks = this.cache[name]
                if(tasks) {
                    const index = tasks.findIndex(f => f === fn || f.callback === fn)
                    if(index >=0) {
                        tasks.splice(index,1)
                    }
                }

            }
            emit(name,once = false,...args){
                if(this.cache[name]) {
                    // 把数组里的回调通过slice()遍历出来，
                    let tasks = this.cache[name].slice()
                    for(let fn of tasks) {
                        // 开始执行回调
                        fn(...args)
                    }
                    if(once) {
                        // 如果是之监听一次，那么执行完之后就从事件队列里删除此事件
                        delete this.cache[name]
                    }
                }
            }
        }

        // 测试
        let a = new EventEimtter()
        let f1 = function(num1,num2) {
            console.log(num1,num2);
        }
        let f2 = function(name1,name2) {
            console.log(name1,name2);
        }
        a.on('aaa',f1) //10 15
        a.on('aaa',f2) //10 15
        a.emit('aaa',false,10,15)

这就是vue中的子组件向父组件传值的原理，代码设计的真是太奇妙了。