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

第Javascript實現(xiàn)Vue跨組件通信的方法詳解目錄概述思路要清晰實現(xiàn)要迅猛測試效果優(yōu)化總結(jié)

概述

我們都知道。

xxx.$on可以訂閱一個消息。

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

xxx.$off可以取消訂閱一個消息。

思路要清晰

這個過程涉及到的幾個概念。

訂閱過程：

消息，肯定要區(qū)分，來個name。

消息也要有事做，來個handler。

一堆消息，要有地方放，來個arr。

訂閱時，交代叫什么name，干什么handler。

發(fā)布過程：

發(fā)布時，交代叫什么，來個name。

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

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

取消訂閱過程：

取消訂閱，肯定要知道名字，來個name。

取消訂閱時，交代要取消的name。

實現(xiàn)要迅猛

代碼不多

classEventBus{

constructor(){

this.arr=[];

on=(name,fn)={

letfilter=this.arr.filter(v====name);

if(filter.length===0){

this.arr.push({

name,fn

emit=(name,param)={

letfilter=this.arr.filter(v====name);

if(filter.length===1){

filter[0].fn(param);

off=(name)={

this.arr=this.arr.filter(v=!==name);

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

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

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

實例的off：篩選賦值。

測試效果

代碼不多。

letbus=newEventBus();

bus.on('say',(msg)={

console.log(msg);

leti=0;

lettimer=setInterval(()={

if(i=30){

bus.off('say');

clearInterval(timer);

return;

bus.emit('say',"你好，世界！"+i++)

},1000);

新建一個消息中心。

訂閱一個事件。

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

30下后，取消訂閱。

運行結(jié)果：

30秒后：

查看是否取消成功：

成功！

優(yōu)化

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

classEventBus{

map=newMap();

on=(name,handler)={

if(!this.map.has(name)){

this.map.set(name,handler);

emit=(name,param)={

lethandler=this.map.get(name);

if(handler!==null){

handler(param);

off=(name