Vue.js全局事件总线（用于任意组件之间的通信）

饮水思源：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=85&spm_id_from=pageDriver

这是一个便于组件之间通信的办法（适合于任意组件之间！），是由程序员总结而来，并非官方的API

基本原理是借助一个全局对象，进行通信。

①效果演示

大儿子和小儿子是兄弟组件。

Vue.js全局事件总线（用于任意组件之间的通信）

②安装全局事件总线

main.js：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this; // 这个$bus可以换其它名字
  },
}).$mount('#app')

③使用全局事件总线

<template>
  <div>
    <SonA />
    <SonB />
  </div>
</template>

<script>
import SonA from './components/SonA.vue'
import SonB from './components/SonB.vue'

export default {
  name: 'App',
  components: {
    SonA,
    SonB,
  }
}
</script>

<style>

</style>

App.vue