[VUE中的全局事件总线]

什么是全局事件总线

全局事件总线是一种组件间的通信方式，适用于任意组件间的通信

全局事件总线的作用

安装一个全局事件总线(GlobalEventBus)

new Vue({
    render:h => h(App),
    // 安装全局事件总线 GlobalEventBus
    beforeCreate(){
        // $bus 就是 当前应用的vm
        Vue.prototype.$bus = this
        console.log(this)
    }
}).$mount('#app')

应为全局事件总线用于任意组件间通信，所以在声明vue时就应当安装全局事件总线，this是声明Vue内的，所以该this指向的是vm本身而不是vc或者window

发送数据以及接受数据

我们有组件Student和组件School，两个组件是同等级别的，我们要做的是点击Student的按钮，把学生名给School组件，School组件收到数据并在控制台中输出姓名即可，因为是两个同等级组件的通信，使用全局事件总线是一个比较好的办法
组件Student：

<template>
    <div>
        <h2>学生姓名：{{name}}h2>
        <h2>学生性别：{{sex}}h2>
        <button @click="sendStudentName">把学生名给School组件button>
    div>
template>

export default {
    name:'Student',
    data() {
        return {
            name:'张三',
            sex:'男'
        }
    },
    methods:{
        sendStudentName(){
            // 出发$bus全局总线名字叫hello的事件 并传参vc的name
            this.$bus.$emit('hello',this.name)
        }
    },
    mounted() {
        
    },
}

组件School:

<template>
    <div>
        <h2>学校名称：{{name}}h2>
        <h2>学校地址：{{address}}h2>
    div>
template>

export default {
    name:'School',
    data() {
        return {
            name:'南京大学',
            address:'南京'
        }
    },
    mounted() {
        // console.log('School',this) 
        // 向全局总线$bus绑定了一个单机事件($on)名字为hello,接受了一个数据data
        this.$bus.$on('hello',(data)=>{
            console.log('我是School组件,收到了数据',data)
        })
    },
    // 销毁之前
    beforeDestroy(){
        // 销毁之前销毁 hello事件
        this.$bus.$off('hello')
    }
}

从以上代码可以看出哪一个组件接受数据就在那一个组件绑定($on)自定义事件，事件回调在该组件自身
发送数据的组件触发事件($emit)

全局事件总线总结：

1.绑定自定义事件以及回调在接受数据的组件内完成，切记在生命周期销毁之前(beforeDestroy())要销毁相应的事件

mounted() {
		//向全局总线$bus绑定了一个单机事件($on)名字为hello,接受了一个数据data
        this.$bus.$on('hello',(data)=>{
            console.log('我是School组件,收到了数据',data)
        })
    },
    // 销毁之前
    beforeDestroy(){
        // 销毁之前销毁 hello事件
        this.$bus.$off('hello')
    }

2.在发送数据的组件内出发事件，并传入相应的参数，参数一为：出发的事件名，别的参数为：值

	methods:{
        sendStudentName(){
            // 出发$bus全局总线名字叫hello的事件 并传参vc的name
            this.$bus.$emit('hello',this.name)
        }
    }