Event-bus总线简单理解（代码实现）

main.js

export const eventBus = new Vue()

App.vue(父组件)

<template>
  <div id="app">
      <!-- eventBus总线 -->
      <Test :age="age"></Test>
      <TestBrother :age="age"></TestBrother> 
   
    <router-view/>
  </div>
</template>

<script>
import Test from './components/event-bus-brother-communication/Test.vue'
import TestBrother  from './components/event-bus-brother-communication/TestBrother.vue'
import {eventBus} from './main'

export default {
  name: 'App',
  components: {
    Test,
    TestBrother,
  },
  data () {
    return {
      age:25
    }
  },
  created () {
    //value为子组件中evevtBus.$emit传过来的第二个参数
    eventBus.$on("changeAge",(value)=>{
      this.age +=1
    })
  },
  methods: {
  }
}
</script>

Test.vue(App.vue的子组件，与下方的TestBrother互为为兄弟组件)

<template>
    <div>
        {{ num }}
        <button @click="add">加一</button>
    </div>
   
</template>
<script>
import {eventBus} from '../../main'
export default {
    props: {
        age:{
            type:Number
        }
    },
    data () {
        return {
            num:this.age
        }
    },
    methods: {
        add(){
            this.num+=1
            //兄弟组件---通过父组件为中间件互相通信，在父组件通过调用changeAge方法让传递的参数age+=1即可
            // this.$emit("changeAge")

            //兄弟组件，通过eventBus总线通信，eventBus.$on接收，eventBus.$emit发送
            eventBus.$emit("changeAge",1)
            
        }
    }
}
</script>

TestBrother.vue(App.vue的子组件，与上方的Test互为为兄弟组件)

<template>
    <div>{{ age }}</div>
</template>
<script>
export default {
    props: {
        age:{
            type:Number
        }
    }
}
</script>