组件之间的通信之全局事件总线

全局事件总线适用于任意组件之间的通信

1、首先，需要在入口文件main.js里面注册全局事件总线

// 注册全局事件总线
Vue.prototype.$bus = new Vue()

2、在数据的发送方使用this.$bus.$emit('xxx'，数据)  提供将要发送的数据

例如，此处的数据发送方为student组件

<template>
  <div class="student">
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <button @click="sendSchoolName">点击把学生名字给School组件</button>
  </div>
</template>

<script>
export default {
  name: 'Student',
  data () {
    return {
      name:'zs',
      sex: '男'
    }
  },
  methods: { 
    sendSchoolName(){
      // 发送数据方
      this.$bus.$emit('hello',this.name)
    }
  }
}
</script>

<style scoped>
    .student{
      background-color: pink;
      padding: 5px;
      margin-top:30px;
    }
</style>

3、在数据的接收方通过this.$bus.$on('xxx',xxx)接收数据

例如，此处的数据接收方为school组件

<template>
  <div class="school">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
  name: 'School',
  data () {
    return {
      name:'糖糖',
      address:'重庆'
    }
  },
  mounted(){
    // 接收数据方
    this.$bus.$on('hello',(data)=>{
      console.log('我是School组件，收到了数据',data)
    })
  },
  beforeDestroy(){
    this.$bus.$off('hello')
  }

}
</script>

<style scoped>
    .school{
      background-color: skyblue;
      padding: 5px;
    }
</style>

4、运行结果如下