如何实现Vue中跨组件通信的多种方法详解？

本文共计773个文字，预计阅读时间需要4分钟。

目录 + 概述 + 思路要清晰 + 实现要高效 + 测试效果 + 优化 + 总结 + 概述 + 我们都知道。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); } }

总结

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