Vue全局事件总线详解

什么是事件总线
我们之前的时候经常性是需要两个隔着老远的组件之间的通信，这个要是一层层的传递下去通信那真的是太麻烦了，所以才有了这个东西

原理如下：在vue加载的时候设立一个公共的实例类型，我们的组件可以在这个全局的实例对象的原型上添加一个函数，等其他组件调用的时候再回调回来用这种方法进行通信。

这个公共的实例对象必须是vue或者vc类型，不然没办法用到上面的用法

1.给vue添加一个公共的实例类型
打开main.js，添加方法
2.全局事件总线的写法，在vue加载的时候填写（这个才是平时的写法）

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

}).$mount('#app')

2.在父组件app中绑定事件
$on事件是指当触发hello事件时，触发回调函数

this.$bus.$on('hello',(data)=>{
      console.log('我是学校，收到了学生传过来的数据',data)
    })

3.在子组件中触发事件，并且传递数据给父组件，接收hello函数

sendstudentname(){
      
      this.$bus.$emit('hello',this.name)
    },

成功读取

注意：记得在接收数据的组件那里，hello用完后要在该组件销毁时把hello销毁哦

export default {
  name: 'school',
  data(){
    return {
      name:"电子科技大学",
      age:"20"
    }
  },
  mounted(){
    console.log('school',this.x)
    this.$bus.$on('hello',(data)=>{
      console.log('我是学校，收到了学生传过来的数据',data)
    })     
  },
  beforeDestroy(){
    this.$bus.$off('hello');//用完后记得顺手丢掉销毁哦
  }
}