react封装函数_React中自己封装一个bus总线用于组件传值

早上好！小伙伴们！

在react的学习中，是不是非常愉快，因为react的社区化，我们可以自己添加许多自己想要的功能，在Vue中关于组件传值，有一个非常好用的工具叫做bus总线(官方封装好的)！组件之间可以用统一的语法去相互传递数据，而在React中官方并没有封装这个东西！没关系，没有我们可以自己造一个。废话不多说，直接上代码。

const event ={}

//就是一个字符串，对应一组回调函数

//callback就是事件对象的回调函数

export const $on=(eventName,callback)=>{ //eventName就是事件名

if(!event[eventName]){ //用自定义事件建立一个数组

event[eventName] =[]

}

event[eventName].push(callback)

}

export const $emit =(eventName,data)=>{

if(!event[eventName]) return;

event[eventName].forEach((cb)=>{

//用这个字符串，找到存储回到函数的数组，并依次执行数组里的回调函数

cb(data);

})

}

export const $off=(eventName,callback)=>{

if(!callback){ //不传回调，把所有的这个事件对应的回调都清掉

event[eventName]=null;

}

else{ //只清除这个事件，这个回调函数

event[eventName]=event[eventName].filter((cb)=>{

return cb!==callback

})

}

}

接下来我们就可以愉快的用

1. $on去监听

2. $emit去发送

3. $off去清除。

今天又是混混睡睡的一天，那么分享就到这里了，小伙伴们感受到React的优雅了嘛！