全局事件总线

作用

通过自定义事件添加到某一个公共对象上，以其为枢纽，来实现任意组件之间的通讯

实现原理

1.其必须能让所有组件获取到

方法： (1)添加到VC的原型上 （由于实际并没有总构造函数VueComonent这样一个概念，因为只有创建了一个组件以后才会创建出一个全新的VC，要添加只能在该组件里通过隐式原型来添加，比较麻烦，不推荐）。 (2)顺着VC原型再往上找添加到Vue的原型上（推荐）

2.能够添加绑定事件

因为v-on这些修饰符和指令是存在于Vue原型对象上的，要想使用就必须是vm或VC (1)通过创建一个新vc来实现

const vc=Vue.extend({})
const transVc=new vc()
Vue.prototype.$bus=transVc//因此所有组件上都有$bus(为了语义化而取此名，也可以取其他的名)，且为一个VC实例对象

(2)通过已有的vm实例来实现(推荐)

//Vue.prototype.x=vm//无法在前面添加因为vm还未创建
const vm = new Vue({
 el:"#app",
 render: h => h(App),
 beforeCreate(){//利用生命周期函数在创建vm后就立即添加
 Vue.prototype.$bus=this
  }
})
Vue.prototype.x=transVc//也无法在后面加因为加晚了，此时页面已经挂载完毕

运用

组件一(绑定自定义事件并，接收数据)

mounted() {
 this.$bus.$on("hello", (getit) => {
 console.log("组件一已收到", getit);
    });
  }

组件二(发送数据)

<template>
 <div>
 <button @click="send">点我发送数据给组件一</button>
 </div>
</template>
<script>
export default {
 name: "City",
 data() {
 return {
 cityName: "北京",
    };
  },
 methods: {
 send(){
 this.$bus.$emit('hello',this.cityName)
    }
  }
};
</script>