24.全局事件总线

1.全局事件总线

（EventBus）可以称之为全局事件总线，当两个组件属于不同的组件分支，或者两个组件没有任何联系的时候，不想使用Vuex这样的库进行数据通信，就可以通过事件总线来进行通信。Vue事件总线就像所有组件的事件中心，在组件中，我们可以使用$emit，$on，$off分别来分发、监听、取消监听事件。

2.Vue事件总线的使用

如下代码注册的事件总线实际是借助Vue实例对象本身

1.创建全局事件总线，在main.js中创建

main.js文件

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

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

下面通过在main.js中注册的$Bus总线实现兄弟组件的数据通信（本质是借助vm本身：vue实例，来实现全局事件总线，因为在vc中可以访问到vm中的原型对象数据）

实现Student组件向School组件中发送数据进行通信

School组件

<template>
    <div class="school">
        <h2>School接收的学生名字：{
   { studentName }}</h2>
    </div>
</template>
<script>
export default {
    name: "School",
    data() {
        return {
            studentName: "",
        }
    },
    methods: {
        
    },
    mounted() {
        this.$bus.$on("getStudentName",studentName => {
            console.log("School接收的studentName：",studentName)
            this.studentName = studentName
        })
    },
    beforeDestroy() {
        this.$bus.$off("getStudentName")
    }
}
</script>

Student组件

<template>
    <div class="student">
        <h2>学生名字：{
   { studentName }}</h2>
        <button @click="sendStudentName">发送学生姓名给School组件</button>
    </div>
</template>
<script>
export default {
    name: "Student",
    data() {
        return {
            studentName: "张三"
        }
    },
    methods: {
        sendStudentName() {
            this.$bus.$emit("getStudentName",this.studentName)
        }
    }
}
</script>

App

<template>
  <div class="app">
    <school />
    <student />
  </div>
</template>
<script>
import School from "./components/School.vue";
import Student from "./components/Student.vue";
export default {
  name: "App",
  components: {
    School,
    Student
  },
  data() {
    return {

    }
  },
  methods: {
    
  }
}
</script>

注意：最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件