如果在你项目中需要多处用到同级组件通讯，而又不想去写繁琐的vuex，可以参考这个小思路。本人在写项目中琢磨出来的，感觉挺好用，分享一下。

1.在utils文件夹下添加BusEvent.js

注释已经很详细了，也很简单，不再过多阐述。

import Vue from "vue";const Bus = new Vue();/** * 同级组件通讯，提交事件 * @param {String} component    要提交的目标组件名称 * @param {string} action       要调用目标组件的方法名 * @param {any} param           目标组件的方法参数 */export const BusEmit = (component, action, param) => {  Bus.$emit(component, action, param);};/** * 同级组件通讯，监听销毁事件 */export const BusOn = {  mounted() {    Bus.$on(`${this.$options.name}`, this.onBusAction);  },  beforeDestroy() {    Bus.$off(`${this.$options.name}`, this.onBusAction);  },  methods: {    onBusAction(action, param) {      log(`调用组件：${this.$options.name},方法：${action},参数：${param}`);      this[action](param);    }  }};

2.需要监听事件的组件

引入 BusOn 挂载在组件的mixins上。

import { BusOn} from "@/utils/BusEvent";export default {  name: "app",  mixins: [BusOn],  methods: {      show(is){          console.log(is);      }  }

3.发起通讯的组件

引入 BusEmit 发起同级组件通讯。

import { BusEmit} from "@/utils/BusEvent";export default {  name: "child",  methods: {      emitShow(is){         //大概意思：我要调用 app 组件的 show 方法，并且传了一个 true 的参数         BusEmit("app","show",true)      }  }

好处：

• 不用每个组件去引入Bus，然后在 mounted 监听，beforeDestroy 销毁（eventbus监听事件必须销毁），很繁琐。
• 提供了良好的扩展，你想调用哪个组件，调用哪个方法，传递什么参数，很清晰。
• 你可以在其他 js 文件 去引入并且调用组件的方法。

比如：在 htttp.js

省略了若干代码，定义了一个处理报错信息的函数。

import { BusEmit } from "../utils/event-bus";** * 请求失败后的错误统一处理 * * @param {Number} status 请求失败的状态码 */const errorHandle = err => {   //....省略   BusEmit("app","toast",{        text:'连接到服务器失败',        time:1000,    })}

当然你可以在 BusEvent.js 进行更多的封装，或者你有更好的思路，欢迎分享讨论。