24. Global event bus

1. Global event bus

（EventBus） It can be called global event bus , When two components belong to different component branches , Or when there is no connection between the two components , Do not want to use Vuex Such a library for data communication , You can communicate through the event bus .Vue The event bus is like the event center of all components , In components , We can use $emit,$on,$off Distribute separately 、 monitor 、 Cancel listening Events .

2.Vue The use of event bus

The event bus registered by the following code actually uses Vue Instance object itself

1. Create a global event bus , stay main.js Created in

main.js file

// introduce Vue
import Vue from 'vue'
// introduce App
import App from './App.vue'
// close Vue Production tips for 
Vue.config.productionTip = false

// establish vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this // Install the global event bus 
	},
})

The following is passed in main.js Registered in $Bus The bus realizes the data communication of brother components （ The essence is to rely on vm In itself ：vue example , To implement the global event bus , Because in vc You can access vm Prototype object data in ）

Realization Student Components to School Send data in the component for communication

School Components

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

Student Components

<template>
    <div class="student">
        <h2> Student name ：{
   { studentName }}</h2>
        <button @click="sendStudentName"> Send student name to School Components </button>
    </div>
</template>
<script>
export default {
    name: "Student",
    data() {
        return {
            studentName: " Zhang San "
        }
    },
    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>

Be careful ： Best in beforeDestroy In the hook , use $off Unbind the events used by the current component