Javascript實(shí)現(xiàn)Vue跨組件通信的方法詳解

更新時(shí)間：2022年03月10日 14:16:20 作者：_雪菜肉絲面_

這篇文章主要為大家詳細(xì)介紹了Vue的跨組件通信，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

概述

我們都知道。

xxx.$on可以訂閱一個(gè)消息。

xxx.$emit可以發(fā)布一個(gè)消息。

xxx.$off可以取消訂閱一個(gè)消息。

思路要清晰

這個(gè)過(guò)程涉及到的幾個(gè)概念。

訂閱過(guò)程：

消息，肯定要區(qū)分，來(lái)個(gè)name。

消息也要有事做，來(lái)個(gè)handler。

一堆消息，要有地方放，來(lái)個(gè)arr。

訂閱時(shí)，交代叫什么name，干什么handler。

發(fā)布過(guò)程：

發(fā)布時(shí)，交代叫什么，來(lái)個(gè)name。

發(fā)布也可能有一些參數(shù)，來(lái)個(gè)param。

發(fā)布時(shí)，交代叫什么name，傳遞參數(shù)param。

取消訂閱過(guò)程：

取消訂閱，肯定要知道名字，來(lái)個(gè)name。

取消訂閱時(shí)，交代要取消的name。

實(shí)現(xiàn)要迅猛

代碼不多

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

構(gòu)造：初始化事件數(shù)組。

實(shí)例的on：查重，如果重復(fù)了就啥都不干。沒(méi)重復(fù)就push。

實(shí)例的emit：查重，如果有這事件就調(diào)用。

實(shí)例的off：篩選賦值。

測(cè)試效果

代碼不多。

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

新建一個(gè)消息中心。

訂閱一個(gè)事件。

計(jì)時(shí)器，每隔一秒發(fā)布該消息。

30下后，取消訂閱。

運(yùn)行結(jié)果：

在這里插入圖片描述

30秒后：

在這里插入圖片描述

查看是否取消成功：

在這里插入圖片描述

成功！

優(yōu)化

使用ES6的Map代替數(shù)組，效率更好。

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