One ： Overview of global event bus

1. The global event bus is a way to communicate between any component , Is essentially an object . It must meet the following conditions ：

 1. All component objects must be able to see it
 2. This object must be able to use $on , $off and $emit Method to bind 、 Trigger unbinding event

Two ： Install the global event bus

   Consider before installing the global event bus ： If you want all component objects to be able to get the event bus , Then where is the appropriate place to install the event bus ? As can be seen from the figure below , When a component instantiates an object vc When getting data , You will first find the component prototype object , If there is no such data in the component instance object , Then find Vue Prototype object ,Vue There is only one prototype object , All components can get its data , therefore The event bus should be installed to Vue On the prototype object .

   Because it is in the entry file main.js Introduced in Vue, Therefore, the event bus needs to be configured to main.js among

//  introduce Vue
import Vue from "vue";
//  introduce App Components 
import App from './App.vue'
//  Turn off the production prompt 
Vue.config.productionTip = false

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

   Why is it in Vue Use the life cycle hook in the instance object beforeCreate Install the event bus ？

   By the life cycle beforeCreate At this time, only the initialization work is completed , Created Vue Instance object , But the template is not resolved , The data broker is not working .

Analysis of several other installation positions
   One ： Creating vm Create an event bus before the instance object

   At present Vue The instance object was not created , Cannot be in Vue Instance object through Vue Prototype object installs event bus .

Two ： Creating vm Create event bus after instance object

   At present Vue The instance object life cycle has been completed , The template has been resolved , The data broker has been completed .

   in summary , Install the event bus at Vue Of instance objects beforeCreate Hook to complete the installation of the event bus

3、 ... and ： Use the global event bus

   Using the global event bus can complete the data interaction between any component , Such as completing the data interaction between brother components .
test ： take Student The student name in the component is passed to School Components （Student Components to School Components pass data ）

   That is to say School Bind events to the global event bus in the component , from Student Components trigger and pass data

School Components

<template>
  <div class="test">
    <h2> School name :{
    {
     name }}</h2>
    <h2> Address ：{
    {
     address }}</h2>
  </div>
</template>

<script>
export default {
    
  name: "School",
  data() {
    
    return {
    
      name: " Zhangsan University ",
      address: "PDS",
    };
  },

  methods:{
    
    getStudentName(data){
    
       console.log(' I am a School Components , from Student The data received in the component is ：'+data);
    }
  },

  mounted() {
    
    //  Bind events to the event bus , The event name is studentName
    this.$bus.$on('studentName',this.getStudentName)
  },

  // Before destroying components , Destroy the event in this component , Avoid invalid occupation of event names in the global event bus 
  beforeDestroy(){
    
    this.$bus.$off('studentName')
  }
};
</script>

Student Components

<template>
  <div class="test">
    <h2> Student number ：{
    {
     id }}</h2>
    <h2> full name ：{
    {
     name }}</h2>
    <button @click="sendStudentName"> towards School The component passes the student name </button>
  </div>
</template>

<script>
export default {
    
  name: "Student",
  data() {
    
    return {
    
      id: "201530326",
      name: " Maple leaves ",
    };
  },
  methods:{
    
    sendStudentName(){
    
        // Trigger events in the global event bus studentName And the reference 
      this.$bus.$emit('studentName',this.name)
    }
  }
};
</script>

test result