Vue 全局事件总线

全局事件总线

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

安装全局总线

$bus就是当前应用的vm

new Vue({
    ....
    beforeCreate(){
    	Vue.prototype.$bus = this
	},
})

使用事件总线

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

   methods( ){
   	demo(data){...}
   }
   ....
   mounted( ){
   	this.$bus.$on('xxx', this.demo)
   }
   

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

   在此处解释以下$emit

   $emit是触发自定义事件，而不是创建一个自定义事件

   
   

   【例如】

   子组件

   this.$emit("remove", data)
   

   父组件

   <School @remove="handleRemove"></School>
   

   handleRemove(data){
   	console.log("删除")
   }
   

   整个的流程为：

   1. 用户触发了子组件的事件
   2. 子组件调用事件函数
   3. 自组件的事件函数中触发自定义事件
   4. 父组件中绑定自定义事件的标签执行父组件的事件函数

3. 最好在beforeDestroy钩子中，用$off去解绑 当前组件所用到的自定义事件