Javascript实现Vue跨组件通信的方法详解
更新时间：2022年03月10日 14:16:20 作者：_雪菜肉丝面_
这篇文章主要为大家详细介绍了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);
}
}
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
很多人可能遇到这样的问题，JS调试，而且都很郁闷，虽然我的JS学的不是那么透彻，基本上算是初级入门.2010-04-04
本文主要介绍了不同DOM级别下的事件处理程序，同时介绍了事件冒泡和捕获的触发原理和方法。熟练地使用不同级别的DOM事件并且解决相应的浏览器兼容性问题对我们的前端项目开发会很有帮助。2016-12-12
这篇文章主要介绍了javascript将数字转换整数金额大写的方法,通过自定义函数中的数组替换实现数字转换整数金额大写的功能,非常具有实用价值,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了微信小程序实现图片选择并预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
用Javascript评估用户输入密码的强度（Knockout版）
早上看到博友6点多发的一篇关于密码强度的文章（连接），甚是感动（周末大早上还来发文）2011-11-11
轻松实现HTML和JS之间的转化的代码...2007-09-09
这篇文章主要介绍了JS实现固定在右下角可展开收缩DIV层的方法,右下角的div层可实现收缩与展开的功能,非常具有实用价值,需要的朋友可以参考下2015-02-02
这篇文章主要和大家谈一谈bootstrap响应式布局，本教程讲解如何在网页布局中应用响应式设计，感兴趣的小伙伴们可以参考一下2016-05-05
ES6标准新增了一种新的函数：Arrow Function（箭头函数）,为什么叫Arrow Function？因为它的定义用的就是一个箭头2020-05-05
这篇文章主要介绍了JavaScript设计模式手写示例，设计模式（Design pattern） 是解决软件开发某些特定问题而提出的一些解决方案也可以理解成解决问题的一些思路。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、 可维护性、灵活性好2022-12-12
最新评论