介绍：

一种组件间通信的方式，适用于任意组件间通信。

步骤

1.安装全局事件总线：

main.js

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

2.使用事件总线

①接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

举例代码（School组件接受数据）：

School.vue

<template>
    <div class="school">
        <h2>学校名称：{{ name }}</h2>
        <h2>学校地址：{{ address }}</h2>
    </div>
</template>

<script>
export default {
    name: 'School',
    data() {
        return {
            name: '尚硅谷',
            address: '北京',
        }
    },
    mounted() {
        // console.log('School', this.x);
          this.$bus.$on('hello',((data)=>{
            console.log('我是School组件，收到了数据',data);
        }))
    },
    beforeDestroy() {
        this.$bus.$off('hello')
    },
}
</script>

②提供数据：this.$bus.$emit('xxxx',数据)

举例代码（Student组件传递数据）：

Student.vue

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

<script>
export default {
    name: 'Student',
    data() {
        return {
            name: '张三',
            sex: '男',
        }
    },
    mounted() {
        // console.log('Student', this.x);
    },
    methods: {
        sendStudentName() {
            this.$bus.$emit('hello',666)
        }
    },
}
</script>

注意：

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

beforeDestroy() {
        this.$bus.$off('hello')
    },