iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Javascript实现Vue跨组件通信的方法详解
  • 416
分享到

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

2024-04-02 19:04:59 416人浏览 泡泡鱼
摘要

目录概述思路要清晰实现要迅猛测试效果优化总结概述 我们都知道。 xxx.$on可以订阅一个消息。 xxx.$emit可以发布一个消息。 xxx.$off可以取消订阅一个消息。 思路要

概述

我们都知道。

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);
	}
}

总结

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

--结束END--

本文标题: Javascript实现Vue跨组件通信的方法详解

本文链接: https://www.lsjlt.com/news/142047.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Javascript实现Vue跨组件通信的方法详解
    目录概述思路要清晰实现要迅猛测试效果优化总结概述 我们都知道。 xxx.$on可以订阅一个消息。 xxx.$emit可以发布一个消息。 xxx.$off可以取消订阅一个消息。 思路要...
    99+
    2024-04-02
  • Vue组件间通信的实现方法讲解
    目录前言一、vuex是什么二、vuex的使用三、四个重要的映射函数四、多组件数据共享五、模块化使用vuex前言 前面介绍过几种可以实现组件间通信的方式props、ref、自定义事件绑...
    99+
    2023-01-09
    Vue组件间通信 Vue组件通信 Vue组件数据共享
  • vue组件通信的多种方法详解
    目录1. 父传子2. 子传父3. 非父子组件传值4. vuex5. refs6. $children7. $parent8. provide & inject9. $attr...
    99+
    2024-04-02
  • Vue组件的通信方式详解
    目录组件间通信的概念组件间通信解决了什么?组件间通信的分类组件间通信的方案props传递数据$emit 触发自定义事件refEventBus$parent 或 $root$attrs...
    99+
    2023-05-15
    Vue组件间的通信方式 Vue组件间通信
  • vue实现组件通信的八种方法实例
    目录1、props父组件--->子组件通信2、$emit子组件--->父组件传递3、bus(事件总线)兄弟组件通信4、$parent、$children直接访问组件实例5...
    99+
    2024-04-02
  • React组件通信实现方式详解
    目录1. 父子组件通信方式父传子子传父2. 非父子组件通信方式1. 父子组件通信方式 ✨父子组件之间的通信很常见,其中父组件可以通过props,原型方法向子组件通信,同时子组件也可以...
    99+
    2023-03-19
    React组件通信 React通信 React组件通信的方式
  • React组件间传值及跨组件通信详解
    目录组件间传值propsref状态提升跨组件通信组件间传值 props 父传子:通过自定义属性向子组件传值,值可以是任何类型 子传父:通过父组件把方法传给子组件,子组件调用传过去的方...
    99+
    2024-04-02
  • 详解React hooks组件通信方法
    目录一、前言二、父子组件通信1)父组件传值给子组件2)子组件传值给父组件3)跨组件传值(父传孙子组件)一、前言 组件通信是React中的一个重要的知识点,下面列举一下 react h...
    99+
    2024-04-02
  • Vue组件间的通信方式详析
    目录前言组件之间通信的场景父子组件之间的通信父组件通过 prop 向子组件传递数据子组件通过自定义事件向父组件传递数据兄弟组件之间的通信状态提升隔代组件之间的通信attrs/attr...
    99+
    2024-04-02
  • React如何实现跨级组件通信
    这篇文章主要介绍React如何实现跨级组件通信,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!跨级组件通信假设一个父组件中存在一个子组件,这个子组件中又存在一个子组件,暂且称为“孙组件...
    99+
    2024-04-02
  • Vue组件之间的通信方式详细讲解
    目录前言一、父级传数据给子级1、传输固定的具体数据2、动态语法3、子组件调用父组件二、子级传数据给父级1、使用自定义事件2、$refs的使用3、同级别组价以及任意组件之间的数据传递前...
    99+
    2024-04-02
  • Vue组件之间四种通信方式详解
    目录前言父子组件通信​父组件与子孙组件的通信​父组件获取子组件数据​无需考虑组件关系的通信​前言 vue 框架提供了前端开发组件的思想,可以通过组件来组合成一个完整的页面,都是随着组...
    99+
    2024-04-02
  • vue如何实现组件通信
    这篇文章主要介绍vue如何实现组件通信,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!前言在vue中, 组件的关系不外乎以下三种:组件是需要通信的,在开发中,常用到的通信方式有:vuex、eventBus、以及prop...
    99+
    2023-06-29
  • Vue实现非父子组件通信的方法是什么
    本篇内容介绍了“Vue实现非父子组件通信的方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!组件是Vue核心的一块内容,组件之间的通信...
    99+
    2023-07-04
  • Vue如何实现组件间通信方式
    这篇文章主要介绍了Vue如何实现组件间通信方式,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。props父组件可以通过props向下传递数据给子组件静态的Props通过为子组件...
    99+
    2023-06-29
  • vue兄弟组件间怎么进行通信?方法详解
    Vue.js 是一款渐进式 JavaScript 框架,它的响应式系统和组件化架构使得它在 Web 开发中越来越受欢迎。近来,很多开发者在使用 Vue.js 时遇到了兄弟组件间通信的问题,本文将介绍如何使用 Vue.js 的兄弟组件方法解决...
    99+
    2023-05-14
  • 揭秘JavaScript观察者模式:轻松实现跨组件通信
    一、JavaScript观察者模式介绍 JavaScript观察者模式是一种设计模式,它允许对象之间进行通信,而不必知道彼此的存在。这种模式非常适合用于构建松散耦合的应用程序。 观察者模式包含以下几个角色: Subject (主题): ...
    99+
    2024-02-03
    JavaScript 观察者模式 跨组件通信 松散耦合。
  • Vue非父子组件之间的通信方式详解
    目录非父子组件的通信1.Provide和Inject1.1基本使用1.2处理响应式数据(了解)2.全局事件总线总结非父子组件的通信 此篇讲解的是, 在学习状态管理之前, 非父子间通信...
    99+
    2024-04-02
  • vue中有哪些实现组件通信的方式
    本篇文章给大家分享的是有关vue中有哪些实现组件通信的方式,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。vue组件中关系说明:如上图所示, A...
    99+
    2024-04-02
  • Vue实现组件间通信的方式有哪些
    本篇内容主要讲解“Vue实现组件间通信的方式有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue实现组件间通信的方式有哪些”吧!1、Props 父 >>> 子&...
    99+
    2023-06-25
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作