Vue全局事件总线详解

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

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

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

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

newVue({
  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销毁哦

exportdefault{
  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');//用完后记得顺手丢掉销毁哦}}