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

MartinDai 发布于2019-08-23 13:08 / 3514人阅读

摘要：同级组件通讯，提交事件要提交的目标组件名称要调用目标组件的方法名目标组件的方法参数同级组件通讯，监听销毁事件调用组件方法参数需要监听事件的组件引入挂载在组件的上。发起通讯的组件引入发起同级组件通讯。

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

云服务器 GPU云服务器 vue父子组件通讯一个封装的Ajax类一段巧妙的css vue组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99244.html

vue组件间通信、数据传递（父子组件，同级组件）

总结一下对vue组件通信的理解和使用。一、组件目录结构父组件：app.vue 子组件：page1.vue 子组件：page2.vue 父组件 app.vue 请输入单价: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

Harpsichord1207 2019-08-21 17:28 评论0 收藏0
vue组件间通信、数据传递（父子组件，同级组件）

总结一下对vue组件通信的理解和使用。一、组件目录结构父组件：app.vue 子组件：page1.vue 子组件：page2.vue 父组件 app.vue 请输入单价: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

tunny 2019-08-01 17:58 评论0 收藏0
Vue仿饿了么app项目总结

摘要：前言这是我第一个基于的项目作品，目的很简单，学以致用，将之前的前端知识积累加上目前流行的前端框架，以项目的形式展现出来。即将属性和请求返回数据对象合并到空对象，然后赋值给这里加上即提供了一种可扩展的机制，倘若原来的属性中有预定义的其他属性。前言这是我第一个基于 Vue 的项目作品，目的很简单，学以致用，将之前的前端知识积累加上目前流行的前端框架，以项目的形式展现出来。源代码：ht...

FrozenMap 2019-08-26 11:47 评论0 收藏0
「Vue实践」武装你的前端项目

摘要：所有的高阶抽象组件是通过定义选项来声明的。所以一般在生命周期或者中，需要用实例的方法清除可当你有多个时，就需要重复性劳动销毁这件事儿。更多的配置请看双端开启开启压缩的好处是什么可以减小文件体积，传输速度更快。本文目录接口模块处理 Vue组件动态注册页面性能调试：Hiper Vue高阶组件封装性能优化：eventBus封装 webpack插件：真香本文项目基于Vue-Cli3，想知...

曹金海 2019-05-23 17:30 评论0 收藏0
vue -- 非父子组件传值，事件总线（eventbus）的使用方式

摘要：我的个人博客地址资源地址非父子组件传值，事件总线的使用方式我的博客地址如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言先说一下什么是事件总线，其实就是订阅发布者模式；比如有一个bus对象，这个对象上有两个方法，一个是on（监听，也就是订阅），一个是emit（触发，也就...

zone 2019-08-23 14:37 评论0 收藏0