eventBus（封装）一个巧妙的解决vue同级组件通讯的思路

Dear 丶 2022-10-01 10:45 151阅读 0赞

如果在你项目中需要多处用到同级组件通讯，而又不想去写繁琐的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** 进行更多的封装，或者你有更好的思路，欢迎分享讨论。

转载于:https://juejin.im/post/5bea35acf265da614e2b9f4b