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

总结

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