可以利用 node 的 api events

创建 utils.js 作为事件总线
EventBus相当于一个全局的仓库,任何组件都可以去这个仓库里获取事件
它的工作原理是发布/订阅方法,通常称为 Pub/Sub 。 

根目录新建 eventBus.ts 

import { EventEmitter } from 'events';

const eventBus = new EventEmitter();

export default eventBus;

兄弟组件1 接受参数

import React,{ useEffect, useState} from "react";


import eventBus from '@/eventBus'

const Child = () => {

    const [myParams, setMyParams] = useState(null);

    useEffect(() => {
        eventBus.on('myParams', (value) => setMyParams(value));
		return () => {
			// 记得不使用此组件的时候要关闭监听,避免再次进入的时候再次创建一个监听事件,如果如此往复多次,就会创建很多监听事件,这是一种灾难
			eventBus.off('myParams',()=> setMyParams(null))
		}
    }, [])

    return (
        <div className="child">
            <h3>这是兄弟1组件</h3>

            <p>这是我兄弟给我的数据:{myParams}</p>
        </div>
    )
}

export default Child;

兄弟组件2 传参

import React from "react";

import eventBus from '@/eventBus'

const Child1 = () => {


    const toSubChildDataFn = () => {
        eventBus.emit('myParams', '这是要给兄弟的数据!')
    };

    return (
        <div className="child" style={{backgroundColor: 'blue'}}>
            <h3>这是兄弟2组件</h3>
       
            <div className="setBtnStyle" onClick={() => toSubChildDataFn()}>给兄弟组件传递数据</div>
        </div>
    )
}

export default Child1;
Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐