vue通信 EventBus事件总线还不会使用？

关于vue组件通信，是有很多方式和方法的。

父子组件通信、兄弟组件通信、隔代组件通信。。。。。。

此次说的EventBus是适用于所有情况的通信。
使用方式：

1. 创建一个新的Vue实例（等价于提供中转）
2. 监听(.$on)事件 & 抛发(.$emit)事件

文件目录：

具体使用如下：

1.创建一个新的Vue实例
文件路径（可自行选择位置创建）：/src/views/EventBus/Store/index.js

index.js

/**
 * 该文件的意义就是创建一个空的实例 供其他组件使用
 */
import Vue from "vue";
let vm = new Vue();
export default vm;

监听的组件：

parent.vue

<template>
  <div class="parent">
    <h2>这里是"Parent" 红色背景</h2>
    <ChildA />
    <ChildB />
  </div>
</template>
<script>
/**
 * 引入子组件
 */
import ChildA from "@/views/EventBus/ChildA";
import ChildB from "@/views/EventBus/ChildB";

/**
 * 引入EventBus，监听指定事件
 */
import EventBus from "@/views/EventBus/Store";
export default {
  name: "Parent",
  components: {
    ChildA,
    ChildB
  },
  created() {
    /**
     *  使用 .$on进行事件监听，当监听的事件被抛发时，会执行对应回调函数
     *  包含两个参数：
     *      参数一：监听的事件名 (注意：必须和抛发时的事件名一致，否则监听不到)
     *      参数二：回调函数 (函数的参数，为抛发该事件时传递的数据)
     */
     
     /**
     * 此处监听的事件名为 handleP
     */
    EventBus.$on("handleP", params => {
      console.log("parent组件监听的事件被抛发了，收到的数据为-> ", params);
    });
  },
  destroyed(){
    // 移除监听
    EventBus.$ff("handleP")
  },
};
</script>
<style lang='scss' scoped>
.parent {
  padding: 10px;
  background-color: red;
  color: #fff;
}
</style>
</style>

ChildA.vue

<template>
  <div class="child-a">
    <h4>这里是 "ChildA" 绿色背景</h4>
  </div>
</template>
<script>
import EventBus from "@/views/EventBus/Store";
export default {
  name: "ChildA",
  created() {
    /**
     * 此处监听的事件名为 handleA
     */
    EventBus.$on("handleA", params => {
      console.log("A组件监听的事件被抛发了，收到的数据为-> ", params);
    });
  }，
  destroyed(){
    // 移除监听
    EventBus.$ff("handleP")
  },
};
</script>
<style lang='scss' scoped>
.child-a {
  margin-top: 10px;
  padding: 10px;
  background-color: green;
}
</style>

ChildB.vue

<template>
  <div class="child-b">
    <h4>
      这里是 "ChildB"
      蓝色边框
    </h4>
    <button @click="emitHandleA">抛发兄弟组件A监听的事件</button>
    <GranSon />
  </div>
</template>
<script>
import GranSon from "@/views/EventBus/GranSon";
import EventBus from "@/views/EventBus/Store";
export default {
  name: "ChildB",
  components: {
    GranSon
  },
  methods: {
    /**
     *  使用 .$emit进行事件抛发
     *  包含两个参数：
     *      参数一：抛发的事件名 (注意：必须和监听时的事件名一致，否则监听不到)
     *      参数二：传递参数 (此处传递的数据会作为对应监听事件回调函数的参数)
     */
    /**
     * 此处监听的事件名为 handleA
     * 此次操作为兄弟组件之间通讯
     */
    emitHandleA() {
      EventBus.$emit("handleA", {
        form: "B组件抛发",
        to: "A组件监听",
        action: "此次是与兄弟组件A组件的通信"
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.child-b {
  padding: 20px;
  background-color: blue;
}
</style>

GrandSon.vue

<template>
  <div class="grand-son">
    "GranSon" 紫色边框
    <br />
    <button @click="emitHandleP">抛发parent组件监听的事件</button>
    <button @click="emitHandleA">抛发A组件监听的事件</button>
  </div>
</template>
<script>
import EventBus from "@/views/EventBus/Store";
export default {
  name: "GranSon",
  methods: {
    /**
     * 此处抛发的事件名为 handleA
     * 此次操作为与父组件的兄弟组件通讯
     */
    emitHandleA() {
      EventBus.$emit("handleA", {
        form: "C组件抛发",
        to: "A组件监听",
        descr: "这个对象是自定义的参数",
        action: "此次为与父组件的兄弟组件进行通信"
      });
    },
    /**
     * 此处抛发的事件名为 handleP
     * 此次操作为隔代组件通信
     */
    emitHandleP() {
      EventBus.$emit("handleP", {
        form: "C组件抛发",
        to: "Parent组件监听",
        action: "此次为与父组件的父组件进行通信"
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.grand-son {
  margin-top: 10px;
  padding: 10px;
  background-color: purple;
}
</style>

效果如图所示：

---

至此，EventBus的简单使用教程完毕！