Vue组件间通信方式之全局事件总线

vue组件通信方式———全局事件总线：任意组件间通信都可以实现数据共享)，个人感觉比props、自定义事件、消息订阅与发布等方式更好用一点。

设计api：

$on：绑定数据

$off：解绑

$emit：发送

$on、$off、$emit都在Vue的原型对象上。(这里on、off、emit前面都有dollar符,然后这里的编辑器都会把这个dollar符号当作转义字符)

在vm实例创建之前，通过vue生命周期钩子 beforeCreate() 安装全局事件总线

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

//在school组件中绑定全局事件总线
    mounted() {
        this.$bus.$on('hello',(data)=>{
            console.log('我是school组件,收到了数据',data)
        })
//在student组件中触发全局事件总线  
    methods: {
        sendStudentName(){
            this.$bus.$emit('hello',this.name)
        }
    }
//在school组件中对事件总线进行解绑
    beforeDestroy() {
    this.$bus.$off('hello')
    }