事件总线通信

事件谁派发谁监听，这里事件都交给$bus派发和监听，在派发事件时调用回调函数

export default class Bus{
    constructor(){
        this.callbacks = {}
    }

    $on(name, fn){
        this.callbacks[name] = this.callbacks[name] || []
        this.callbacks[name].push(fn)
    }

    $emit(name, args){
        if(this.callbacks[name]){
            this.callbacks[name].forEach(cb =>{
                cb(args)
            })
        }
    }
}

main.js 文件

import Bus from "./utils/bus"
Vue.prototype.$bus = new Bus()

跨越多层级的组件中使用通信

this.$bus.$emit("cat", "xiangcai")
this.$bus.$on("cat", (params)=>{
        console.log(params)
})