跨组件通信

跨组件通信

遇到的使用场景：在当前页面中有一个table表格组件（叫table1吧），其中中确认、拒绝了一个订单的请求后，需要调用子表格组件中的方法，更新子表格组件中的信息（table2），项目没有用redux，选择使用EventEmitter进行跨组件通信

然后写一个eventBus.js

import EventEmitter from 'event-emitter';
const eventBus = new EventEmitter();
export default eventBus;

在需要的地方引入这个js文件

具体使用方法： 当前组件中监听eventBus：

const handletest = async ()=>{
try{
if(...){
eventBus.emit('yourBusName')
}
//...code
}
catch{
//...code
}
}

子组件中创建一个eventBus:

const handleSomething= () => {
        fetchSomething(balabala);
    };
    useEffect(() => {
    eventBus.on('yourBusName', handleSomething);
    return () => {
        eventBus.off('yourBusName', handleSomething);
    };
    }, [balabala]);

简单参考

const fetchSomething= async () => {
        try {
            const response = await api.hahaha({ balabala: balabala});
            const rawData = response.data;
            const data = Array.isArray(rawData.details)
                ? rawData.details.map((item, index) => ({
                    key: index,
        //...其他的参数
              }))
                : [];
        } catch (error) {
            console.log(error);
        }
    };

这样实现的效果是：当前页面调用handleConfirm时，某些条件下触发子组件中名为yourBusName的eventBus，子组件中的eventBus会调用fetchSomething方法更新一些数据 有什么好处? 简单一点，不用引入redux

参考链接： https://www.runoob.com/nodejs/nodejs-event.html