vue中$bus全局事件总线

1.介绍

说明：Vue中，$bus 指的通常是一个全局事件总线，它是一种用于在不同组件之间进行通信的模式。它允许你在一个组件中发出事件，而其他组件可以监听并响应这些事件。

2.main.js

说明：为什么在beforeCreate钩子函数添加是应为此时的实例还没有创建完成；而created钩子函数实例已经创建完成了。其实就是一个顺序问题，在 data中声明的属性会在实例创建的过程中被初始化，并且能够被 Vue 实例的其他部分访问和修改。本质是created钩子函数执行后，就不会遍历data，然后就不是一个响应式的了。 

new Vue({
  render: (h) => h(App),
  router,
  // 注册仓库，组件的身上会多个一个属性$store
  store,
  beforeCreate() {
    // 全局事件总线
    Vue.prototype.$bus = this;
  },
}).$mount("#app");

3.兄弟组件1

说明：通知兄弟组件

// 通知兄弟组件清除关键字了
this.$bus.$emit("clearKeyword");

4.兄弟组件2

说明：在mounted钩子函数使用是因为 Vue 组件实例已经被挂载到 DOM 上，并且可以进行真实 DOM 元素的操作和初始化。

  mounted() {
    //通过全局事件总线清楚关键字
    this.$bus.$on("clearKeyword", () => {
      this.keyword = "";
    });
  },