Javascript实现Vue的跨组件通信的方法详解 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); }}

总结 【Javascript实现Vue的跨组件通信的方法详解】本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!