Vue全局事件总线

本案例中组件的关系如下图：

1、安装事件总线

main.js

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this //安装全局事件总线
  }
}).$mount('#app')

2、SchoolCom和App组件注册sendStudentNameEvent事件

注意：SchoolCom和App组件，任意一个组件销毁了组件实例对象，那么所有的组件都会跟着解绑sendStudentNameEvent事件！！因为this.$bus就是vue实例对象！

SchoolCom.vue

export default {
    ...
    mounted(){
        this.$bus.$on("sendStudentNameEvent", (data) =>{
            console.log("我是SchoolCom收到学生名字：", data)
        });
    },
    beforeDestroy(){
        this.$bus.$off("sendStudentNameEvent")  //解绑sendStudentNameEvent事件
    }
}

App.vue

export default {
    ...
    mounted(){
        this.$bus.$on("sendStudentNameEvent", (data)=>{
            console.log("我是APP组件收到学生名字：", data)
        })
    },
    beforeDestroy(){
        this.$bus.$off("sendStudentNameEvent") //解绑sendStudentNameEvent事件
    }
}

3、StudentCom组件添加按钮触发sendStudentNameEvent事件

StudentCom.vue

<template>
    <div class="demo">
        <h1>{{msg}}</h1>
        <h1>学生名字:{{name}}</h1>
        <h1>学生年龄:{{age}}</h1>
        <button @click="sendStudentName">给其它组件发送学生名字</button>
    </div>
</template>

export default {
    ...
    methods:{
        sendStudentName: function(){
            this.$bus.$emit("sendStudentNameEvent", this.name)
        }
    }
}

4、案例运行效果