Event center parameter transfer, peer component value transfer method, brother component value transfer

Parent component :

<template>
  <div class="home">
    <tom />
    <jerray />
  </div>
</template>

<script>
// @ is an alias to /src
import Tom from '@/components/eventbus/tom.vue'
import Jerray from '@/components/eventbus/jerray.vue'
export default {
    
  name: 'Home',
  components: {
    
    Tom,
    Jerray
  }
}
</script>

Two sub components at the same level

Catalog ：

Event center ：

tom：

<template>
  <div>
    <div>Tom</div>
    <div>{
    {
    num}}</div>
    <button @click="handle"> Click on </button>
  </div>
</template>
<script>
import eventBus from './eventbus'
export default {
    
  name: 'Tom',
  components: {
    },
  props: {
    },
  data () {
    
    return {
    
      num: 0,
      dataTom: 11111
    }
  },
  watch: {
    },
  computed: {
    },
  methods: {
    
    handle () {
    
      eventBus.$emit('jerray-event', this.dataTom)
    }
  },
  created () {
    },
  mounted () {
    
    //  Monitoring events 
    eventBus.$on('tom-event', (val) => {
    
      this.num = val
    })
  }
}
</script>
<style lang="less" scoped>
</style>

jerray：

<template>
  <div>
    <div>jerray</div>
    <div>{
    {
    num}}</div>
    <button @click="handle"> Click on </button>
  </div>
</template>
<script>
import eventBus from './eventbus'
export default {
    
  name: 'Jerray',
  components: {
    },
  props: {
    },
  data () {
    
    return {
    
      num: 0,
      dataJerray: 222222
    }
  },
  watch: {
    },
  computed: {
    },
  methods: {
    
    handle () {
    
      eventBus.$emit('tom-event', this.dataJerray)
    }
  },
  created () {
    },
  mounted () {
    
    //  Monitoring events 
    eventBus.$on('jerray-event', (val) => {
    
      this.num = val
    })
  }
}
</script>
<style lang="less" scoped>
</style>

Mechanism thinking

use vue Instance as the event center ： In fact, I don't understand this , But it must be useful , oh , He's meow , When I went to get a glass of water, I thought a little , Why? , Because we need to use it $emit To trigger the event , Who has $emit, It must be vue Examples

eventBus.$on Is to add an event to the event center , And then the operation triggered by the event , Be similar to addEventListener usage .

And then use $emit To trigger this event . This is actually very clever , This $emit , How to use it like this , It can also be in parent-child components , What about the method that the child component triggers the parent component ？