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

栏目: Android · 发布时间: 5年前

内容简介:如果在你项目中需要多处用到同级组件通讯,而又不想去写繁琐的vuex,可以参考这个小思路。本人在写项目中琢磨出来的,感觉挺好用,分享一下。1.在注释已经很详细了,也很简单,不再过多阐述。

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

创业无畏

创业无畏

彼得· 戴曼迪斯、史蒂芬· 科特勒 / 贾拥民 / 浙江人民出版社 / 2015-8 / 69.90元

 您是否有最大胆的商业梦想?您是否想把一个好主意快速转化为一家市值几百亿甚至几千亿元的公司?《创业无畏》不仅分享了成功创业家的真知灼见,更为我们绘制了一幅激情创业的行动路线图!  创业缺人手怎么办?如何解决钱的问题?把握指数型大众工具,互联网就是你车间,你的仓库。拥有好的创意,自然有人把钱“白白地送给你用”。当你大海捞针的时候,激励性大奖赛会让针自己跑到你的眼前来!  掌握指数级......一起来看看 《创业无畏》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具