早上好!小伙伴们!
在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的优雅了嘛!