Javascript实现Vue跨组件通信的方法详解
作者:_雪菜肉丝面_
这篇文章主要为大家详细介绍了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); } }
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!