Global event bus

• Realize the communication between any components

• Graphic analysis ：

hypothesis App There are components in A、B、C、D.App There is one outside that does not belong to any component X. We want to achieve D Put the data 666 Pass it to the component A.
First ,A to X Bind a name demo Custom events for , The callback function of the event is in the component A in .
secondly , Components D Just trigger X On the body demo Events can be .
because ：X On the body demo Be triggered , that demo The callback corresponding to the event is also executed .

If ,D I want to 8 Pass it to the component B, What to do ？
First ,B to X Bind a name test Custom events for , The callback function of the event is in the component B in .
secondly , Components D Just trigger X On the body test Events can be .

• X Where should I add it ？
  First ,X It should be visible to all components （ Use ）, that X belong Vue Add .
  
  stay main.js in ：

//  stay Vue Add X
Vue.prototype.x = {
    a:1,b:2}

however , The code above is dead . We should be

//  Construct a VueComponent
const Demo = Vue.extend({
    })
// d Is the instance object of the component vc, and vc Can call $on,$off,$emit
const d = new Demo()
//  stay Vue Add X
Vue.prototype.x = d

We can still use it vm To complete , Below this On behalf of vm example , And it was completed before the production of the project .

new Vue({
    
   ……
    beforeCreate(){
    
        Vue.prototype.x = this
    }
})

summary ：
The standard writing is ：

new Vue({
    
   ……
    beforeCreate(){
    
        Vue.prototype.$bus = this // Install the global event bus 
    }
})

Instance analysis

Premise ：
App Contains components Student And the component School, Belongs to the same level component . We want to make Student Send a 666 to School.

• First , stay main.js Written in Chinese X（ The following is written in standard $bus Instead of ）
• secondly ,School Want to get Student The content in , Then give it to me X The binding event hello.
• Last ,Student Trigger event inside hello Can .

Student in ：

Design a button , Give the button a click event , Click on the trigger sendStudentName(), And then trigger hello
Trigger hello event , And transmission 666

<template>
  <div>
    <button @click="sendStudentName"> Give the students their names School Components </button>
  </div>
</template>
……
  methods:{
    
    sendStudentName(){
    
      this.$bus.$emit('hello',666)
    }

School in ：

School Bind events at load time hello, The value obtained is data

  mounted(){
    
    this.$bus.$on('hello',(data)=>{
    
      console.log(' I am a School Components , Received the data ',data)
    }),
  beforeDestroy(){
    
	this.$bus.$off('hello') // Unbundling hello event 
}