Javascript实现Vue跨组件通信的方法详解

目录
  • 概述
  • 思路要清晰
  • 实现要迅猛
  • 测试效果
  • 优化
  • 总结

概述

我们都知道。

xxx.$on可以订阅一个消息。

xxx.$emit可以发布一个消息。

xxx.$off可以取消订阅一个消息。

思路要清晰

这个过程涉及到的几个概念。

订阅过程：

消息，肯定要区分，来个name。

消息也要有事做，来个handler。

一堆消息，要有地方放，来个arr。

订阅时，交代叫什么name，干什么handler。

发布过程：

发布时，交代叫什么，来个name。

发布也可能有一些参数，来个param。

发布时，交代叫什么name，传递参数param。

取消订阅过程：

取消订阅，肯定要知道名字，来个name。

取消订阅时，交代要取消的name。

实现要迅猛

代码不多

class EventBus {
	constructor() {
		this.arr = [];
	}
	on = (name, fn) => {
		let filter = this.arr.filter(v => v.name === name);
		if (filter.length === 0) {
			this.arr.push({
				name, fn
			})
		}
	}
	emit = (name, param) => {
		let filter = this.arr.filter(v => v.name === name);
		if (filter.length === 1) {
			filter[0].fn(param);
		}
	}
	off = (name) => {
		this.arr = this.arr.filter(v => v.name !== name);
	}
}

构造：初始化事件数组。

实例的on：查重，如果重复了就啥都不干。没重复就push。

实例的emit：查重，如果有这事件就调用。

实例的off：筛选赋值。

测试效果

代码不多。

let bus = new EventBus();
bus.on('say', (msg) => {
	console.log(msg);
});
let i = 0;
let timer = setInterval(() => {
	if (i >= 30) {
		bus.off('say');
		clearInterval(timer);
		return;
	}
	bus.emit('say', "你好，世界！" + i++)
}, 1000);

新建一个消息中心。

订阅一个事件。

计时器，每隔一秒发布该消息。

30下后，取消订阅。

运行结果：

30秒后：

查看是否取消成功：

成功！

优化

使用ES6的Map代替数组，效率更好。

class EventBus {
	map = new Map();
	on = (name, handler) => {
		if (!this.map.has(name)) {
			this.map.set(name, handler);
		}
	}
	emit = (name, param) => {
		let handler = this.map.get(name);
		if (handler !== null) {
			handler(param);
		}
	}
	off = (name) => {
		this.map.delete(name);
	}
}

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • vue 解决兄弟组件、跨组件深层次的通信操作

    兄弟组件之间的通信同样是在项目中经常会遇到的组件间的通信问题之一, 这种问题的最根本方法就是: 把兄弟组件内部的变量提升到一个中央仓库. 借助父级组件链式交互 使子组件1 通过 $emit 通知父级, 父级再通过响应 子组件1 的事件去触发子组件2的事件,这样的链式操作,在子组件不多的时候,但是一个不错的解决方法 子组件1 <template> <div> <p @click="$emit('fromFirst','来自A组件')">first组件&

  • vue任意关系组件通信与跨组件监听状态vue-communication

    众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,vuex 太巨,而 $emit 又不好维护 provider 不可控 这个时候就该今天的主角 vue-communication 登场了! vue-communication介绍 他是一个可观测可调试的vue组件通信方案 任意关系组件可直接通信 支持跨组件监听数据变化 支持发送离线数据 安装 yarn add vue-communication // 或者 n

  • 详解vue跨组件通信的几种方法

    在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了问题. props双向绑定 通过 sync 双向绑定,属性变化会同步到所有组件,这也是最简单的实现方式,缺点是属性会比较多.实现方式如下 App.vue 文件 <template> <div id="app"> <mask :hide-mask.sync="hideMask"></mask> <

  • vue采用EventBus实现跨组件通信及注意事项小结

    vue采用EventBus实现跨组件通信及注意事项小结

    EventBus EventBus是一种发布/订阅事件设计模式的实践. 在vue中适用于跨组件简单通信,不适应用于复杂场景多组件高频率通信,类似购物车等场景状态管理建议采用vuex. 挂载EventBus到vue.prototype 添加bus.js文件 //src/service/bus.js export default (Vue) => { const eventHub = new Vue() Vue.prototype.$bus = { /** * @param {any} event

  • Javascript实现Vue跨组件通信的方法详解

    Javascript实现Vue跨组件通信的方法详解

    目录 概述 思路要清晰 实现要迅猛 测试效果 优化 总结 概述 我们都知道. xxx.$on可以订阅一个消息. xxx.$emit可以发布一个消息. xxx.$off可以取消订阅一个消息. 思路要清晰 这个过程涉及到的几个概念. 订阅过程: 消息,肯定要区分,来个name. 消息也要有事做,来个handler. 一堆消息,要有地方放,来个arr. 订阅时,交代叫什么name,干什么handler. 发布过程: 发布时,交代叫什么,来个name. 发布也可能有一些参数,来个param. 发布时,交

  • Android编程实现AIDL(跨进程通信)的方法详解

    Android编程实现AIDL(跨进程通信)的方法详解

    本文实例讲述了Android编程实现AIDL(跨进程通信)的方法.分享给大家供大家参考,具体如下: 一. 概述: 跨进程通信(AIDL),主要实现进程(应用)间数据共享功能. 二. 实现流程: 1. 服务器端实现: (1)目录结构,如下图: (2)实现*.aidl文件: A. IAIDLService.aidl实现: package com.focus.aidl; import com.focus.aidl.Person; interface IAIDLService { String getN

  • VUE 自定义组件模板的方法详解

    VUE 自定义组件模板的方法详解

    本文实例讲述了VUE 自定义组件模板的方法.分享给大家供大家参考,具体如下: 先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,页面展示效果做动态可配,需求更新时,重新配置一份模板录入到数据库,然后根据用户选择的模板进行展示. 关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the runtime-only b

  • JavaScript实现与web通信的方法详解

    web通信,一个特别大的topic,涉及面也是很广的.因最近学习了 javascript 中一些 web 通信知识,在这里总结下.文中应该会有理解错误或者表述不清晰的地方,还望斧正! 一.前言 1. comet技术 浏览器作为 Web 应用的前台,自身的处理功能比较有限.浏览器的发展需要客户端升级软件,同时由于客户端浏览器软件的多样性,在某种意义上,也影响了浏览器新技术的推广.在 Web 应用中,浏览器的主要工作是发送请求.解析服务器返回的信息以不同的风格显示.AJAX 是浏览器技术发展的成果,

  • JavaScript实现事件总线(Event Bus)的方法详解

    JavaScript实现事件总线(Event Bus)的方法详解

    目录 介绍 原理 分析 进阶 1. 如何在发送消息时传递参数 2. 订阅后如何取消订阅 3. 如何只订阅一次 4. 如何清除某个事件或者所有事件 5. TypeScript 版本 6. 单例模式 总结 介绍 Event Bus 事件总线,通常作为多个模块间的通信机制,相当于一个事件管理中心,一个模块发送消息,其它模块接受消息,就达到了通信的作用. 比如,Vue 组件间的数据传递可以使用一个 Event Bus 来通信,也可以用作微内核插件系统中的插件和核心通信. 原理 Event Bus 本质上

  • Vue 中使用 typescript的方法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescript npm install -g ty

  • vue中使用vue-pdf的方法详解

    需求:简单说~~有两个pdf文件需在h5上展示,通过点击按钮切换不同文件的显示 注: 1.vue-pdf默认展示首页,我这里的需求是通过滑动展示所有页面,这里使用的v-for遍历.有多少页就加载了多少个pdf组件. 2.pdf文件存在跨域问题,这个需要后端同学支持. 3.demo上的pdf文件只有一页,测试多页展示,自己改用多页pdf文件即可 <template> <div class="pdf_wrap"> <div class="pdf_li

  • 基于vue 兄弟组件之间事件触发(详解)

    直奔主题! 兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,watch来监听触发事件. 场景是父级组件A同时引用两个子级组件B,C.点击B组件中的按钮执行C组件中的事件. 第一步:父级组件A <bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play> methods:{ listChild:function(val){//B组件自定义事件 状态是布尔值 t

  • Vue关于组件化开发知识点详解

    全局组件注册 Vue.component('first-component', { data: function () { return { count: 0 } }, template: '<button @click="count++">{{ count }}</button>' }) data 必须是一个函数 组件模板内容必须是单个根元素 组件模板内容可以是模板字符串 全局组件可以嵌套全局组件 组件命名方式 Vue.component('first-com

  • Vue3内置组件Teleport使用方法详解

    目录 1.Teleport用法 2.完成模态对话框组件 3.组件的渲染 前言: Vue 3.0 新增了一个内置组件 teleport ,主要是为了解决以下场景: 有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置 场景举例:一个 Button ,点击后呼出模态对话框 这个模态对话框的业务逻辑位置肯定是属于这个 Button ,但是按照 DOM 结构来看,模态对话框的实际位置应该在整个应用的中间 这样就有了一个问题:组件的

随机推荐