vue3如何使用eventBus订阅发布模式

目录
  • Ⅰ. 什么是eventBus？
  • Ⅱ. vue3 如何使用
    • 步骤一 （eventBus 容器）
    • 步骤二 （ 订阅者 ）
    • 步骤三 （ 发布者 ）
  • 总结

Ⅰ. 什么是eventBus？

通俗的讲，就是在任意一个组件，想把消息（参数） -> 传递到任意一个组件 ，并执行一定逻辑。

Ⅱ. vue3 如何使用

eventBus vue3中没有了，eventBus，所以我们要自己写，但是非常简单。

步骤一 （eventBus 容器）

在src目录，创建个bus文件夹，存放 自己写的 bus.js ；

编写 bus.js => 在class 原型上绑定三个 （订阅，取消订阅，发布）函数；

// bus.js
class Bus {
	constructor() {
		this.list = {};  // 收集订阅
	}
	// 订阅
	$on(name, fn) {
		this.list[name] = this.list[name] || [];
		this.list[name].push(fn);
	}
	// 发布
	$emit(name, data) {
		if (this.list[name]) {
      		this.list[name].forEach((fn) => {	fn(data);   });
    	}
	}
	// 取消订阅
	$off(name) {
		if (this.list[name]) {
			delete this.list[name];
		}
	}
}
export default new Bus;

订阅者（on），讲函数放入 list 中 => 等待发布者（emit），传参去调用；

由于函数是对象，内存地址未发生变化，还在在订阅者（on）组件中执行。

步骤二 （ 订阅者 ）

在 comA.vue 中订阅；

订阅只是 存放函数，并未执行，等发布后才会执行；

<template>
  <div>
 	{{ name }} --- {{ age }}
  </div>
</template>
<script>
import {ref , onUnmounted} from 'vue';
import Bus from '../bus/bus.js';
export default {
  setup() {
       const name = '张三';
       const age = ref(18)
       Bus.$on('addAge',({ num })=>{    age.value = num;    })

       //组件卸载时，取消订阅
	   onUnmounted( () => { Bus.$off('addAge') } )
 	}
 }
</script>

在离开组件（onUnmounted）时 ，将注册进去的 ，订阅函数的数组删除，避免存放越来越多。

步骤三 （ 发布者 ）

在 comB.vue 中发布；

调用订阅 并传参；

<template>
    <button @click="fabu">发布</button>
</template>
<script>
import Bus from '../eventBus/Bus.js'
export default {
  setup() {
	 function fabu(){
 		Bus.$emit('addAge',{age:'19'});
	 }
   }
 }
</script>

发布后，在订阅者的组件就会执行，注意对应的 订阅和发布的name 要相同。

总结

到此这篇关于vue3如何使用eventBus订阅发布模式的文章就介绍到这了,更多相关vue3 eventBus订阅发布模式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue通信方式EventBus的实现代码详解

    vue通信方式有很多,项目中用的比较多的的有 pros.vuex.$emit/$on 这3种,还有 provide/inject (适合高阶组件). $attrs和$listeners (适合高阶组件)以及 $parent/$child/ref.eventBus 等这3种方式.很多时候我们都是只会使用api,而懂得原理以及实现,但我就觉得懂得原理以及实现跟一个只会调用api的开发人员时不在同一层次的.所以这里就像把跨组件通信的 eventBus 通信的原理给大家展示一下.这也是自己学到大佬的的东

  • Vue中使用的EventBus有生命周期

    Vue中使用的EventBus有生命周期

    最近遇到了vue项目中的性能问题,整个项目不断的进行操作五分钟左右,页面已经很卡,查看页面占用了1.5G内存,经过排查一部分原因,是自己模块使用的eventBus在离开页面未进行off掉.我们进行下验证: 1.不随生命周期销毁 我们在home首页的代码是这样的: created () { let text = Array(1000000).fill('xxx').join(',') //创建一个大的字符串用于验证内存占用 $eventBus.$on('home-on', (...args) =>

  • Vue中事件总线(eventBus)的深入详解及使用

    Vue中事件总线(eventBus)的深入详解及使用

    目录 1.简介 2.使用 安装及引入 在组件中使用 补充:移除监听事件 总结 1. 简介 Vue 组件中常见的有:父子组件通信.兄弟组件通信.而父子组件通信就很简单,父组件会通过 props 向下传数据给子组件,当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件. 今天就来说说,如果两个页面没有任何引入和被引入关系,该如何通信呢? 如果应用程序不需要类似 Vuex 这样的库来处理组件之间的数据通信,就可以考虑 Vue 中的事件总线 ,即 eventBus 来通信. eventBus

  • vue 使用eventBus实现同级组件的通讯

    新创建一个vue实例用于调度事件的绑定和发送 可以做到同级组件相互通讯,传递参数,点击第一个组件会修改第二个组件的label值,点击第二个组件会修改第二个组件的label值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="vue.js"></script> </hea

  • vue组件中传值EventBus的使用及注意事项说明

    主要想说下非父子组件之间的通信. 项目场景: 在app.vue里写了一个公共的顶部导航navbar,然后右侧有个分享按钮,而这个分享按钮只有在特定的页面才展示,项目里是在lottery.vue页面,然后想实现app.vue里点击分享按钮,触发lottery.vue里的分享方法. 解决:使用eventBus 1.创建一个event-bus.js import Vue from 'vue' export const EventBus = new Vue() 2.在app.vue引入eventbus,

  • vue2.0s中eventBus实现兄弟组件通信的示例代码

    vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通信有了更加清晰的操作,对于中大型的项目来说,一开始就把vuex的使用计划在内是明智的选择. 然而在一些小型的项目,或者说像我这样写到一半才发现vue2.0用不了$.broadcast和$dispatch的人来说,就需要一个比较便捷的解决方法.那么,eventBus的作用就体现出来了. 主要是现实途径是

  • vue3如何使用eventBus订阅发布模式

    目录 Ⅰ. 什么是eventBus? Ⅱ. vue3 如何使用 步骤一 (eventBus 容器) 步骤二 ( 订阅者 ) 步骤三 ( 发布者 ) 总结 Ⅰ. 什么是eventBus? 通俗的讲,就是在任意一个组件,想把消息(参数) -> 传递到任意一个组件 ,并执行一定逻辑. Ⅱ. vue3 如何使用 eventBus vue3中没有了,eventBus,所以我们要自己写,但是非常简单. 步骤一 (eventBus 容器) 在src目录,创建个bus文件夹,存放 自己写的 bus.js : 编

  • js设计模式之代理模式及订阅发布模式实例详解

    js设计模式之代理模式及订阅发布模式实例详解

    本文实例讲述了js设计模式之代理模式及订阅发布模式.分享给大家供大家参考,具体如下: 为啥将两种模式放在一起呢?因为这样文章比较长啊. 写博客的目的我觉得首要目的是整理自己的知识点,进而优化个人所得知识体系.知识成为个人的知识,就在于能够用自己的话表达同一种意义. 本文是设计模式系列文章的第二篇文章,第一篇:. 1,代理模式,只是学习了虚拟代理以及缓存代理,具体案例 1)虚拟代理 //业务代码 var myImage = (function() { var imgNode = document.

  • 深入了解C#设计模式之订阅发布模式

    什么是Pub-Sub 发布订阅是一种设计模式,它允许应用程序组件之间进行松散耦合. 其实订阅发布设计中主要是发布者生成事件通道,用于在不了解任何订阅者存在的情况下通知订阅者. 当然委托EventHandlers和Event关键字在此事件处理机制中担任着重要的角色.下面我们来看看如何使用它们. Pub和Sub的使用 首先我们看一个简单地订阅发布模式. 定义一个Action委托,无返回值. namespace PubSubPattern { public class Pub { public Act

  • Redis 订阅发布_Jedis实现方法

    我想到使用Redis的订阅发布模式是用来解决推送问题的-. 对于概念性的叙述,多多少少还是要提一下的: 什么是Redis发布订阅?Redis发布订阅是一种消息通信模式,发送者通过通道A发送消息message,订阅过通道A的客户端就可以接收到消息message.嗯度娘上面的解释要比我所说的好多了,而我所理解的就是:所谓的订阅发布模式,其实和我们看电视,听广播差不多,在我们没有调台(换频道)的时候,那个频道也是在传递消息的(发布).我们换到那个频道上(订阅)就能接收到消息了.是的,虽然可能有些不恰当

  • JAVA | Guava EventBus 使用 发布/订阅模式的步骤

    前言 EventBus 是 Guava 的事件处理机制,是观察者模式(生产/消费模型)的一种实现. 观察者模式在我们日常开发中使用非常广泛,例如在订单系统中,订单状态或者物流信息的变更会向用户发送APP推送.短信.通知卖家.买家等等:审批系统中,审批单的流程流转会通知发起审批用户.审批的领导等等. Observer模式也是 JDK 中自带就支持的,其在 1.0 版本就已经存在 Observer,不过随着 Java 版本的飞速升级,其使用方式一直没有变化,许多程序库提供了更加简单的实现,例如 Gu

  • Spring Boot ActiveMQ发布/订阅消息模式原理解析

    本文在<Spring Boot基于Active MQ实现整合JMS>的基础上,介绍如何使用ActiveMQ的发布/订阅消息模式.发布/订阅消息模式是消息发送者发送消息到主题(topic),而多个消息接收者监听这个主题:其中,消息发送者和接收者分别叫做发布者(publisher)和订阅者(subscriber),对于发布者来说,它和所有的订阅者就构成了一个1对多的关系.这种关系如下图所示: 发布/订阅模式的工作示意图 消息生产者将消息(发布)到topic中,可以同时有多个消息消费者(订阅)消费该

  • JavaScript设计模式之观察者模式（发布者-订阅者模式）

    观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式. 复制代码 代码如下: div.onclick  =  function click (){ alert ( "click' ) } 只要订阅了div的click事件. 当点击div的时候, function click就会被触发. 那么到底什么是观察者模式呢. 先看看生活中的观察者模式. 好莱坞有句名言. "不要给我

  • Vue3.0中的monorepo管理模式的实现

    前言 前段时间9月21日参加了在成都举办的第五届FEDAY, 印象比较深刻的是白鹭引擎首席架构师@王泽分享的<框架开发中的基础设施搭建>,提到了在下一代白鹭引擎中使用到monorepo模式,以用来管理多个模块,协调各个模块之间的依赖更新. 正好在国庆期间10月5日尤大公开了vue3.0已完成的源码,也是采用了monorepo管理模式,看来monorepo确实有其独到的优势,再加上以前在项目中遇到过相关的痛点,所以深入地了解了一下这种模式,本文将基于vue3.0讨论如何通过monorepo模式来

  • js实现的订阅发布者模式简单示例

    本文实例讲述了js实现的订阅发布者模式.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-

  • 原生js实现的观察者和订阅者模式简单示例

    本文实例讲述了原生js实现的观察者和订阅者模式.分享给大家供大家参考,具体如下: 观察者模式也叫 发布者-订阅者模式,发布者发布事件,订阅者监听事件并做出反应 在传统的前端解耦方面,观察者模式作为比较常见一种设计模式,大量使用在各种框架类库的设计当中. 核心代码: // eventProxy.js 'use strict'; const eventProxy = { onObj: {}, oneObj: {}, on: function(key, fn) { if(this.onObj[key]

随机推荐