react中组件通信之evenbus使用详解（兄弟组件传值案例）

前言

今天给大家介绍react中的另一种传值方式——使用evenbus进行传值，还是一样的以小案例来讲解它的具体用法

兄弟组件传值

兄弟组件中,使用eventbus事件总线进行通信,采用发布-订阅event bus进行。使用evenbus我们先要下载它
下载events：

yarn add -D events

然后新建一个event.js文件，如下：

import {
    
     EventEmitter } from "events"

// 导入事件总线,利用这个对象发射和监听事件,这个对象是全局的
const eventBus = new EventEmitter()

export default eventBus

我们来到兄弟组件A当中，引入eventBus,然后使用emit发送事件：
注意发送的格式：发送事件eventBus.emit(‘事件名’, 参数1, 参数2)

import React, {
    
     Component } from 'react'
import eventBus from './event'

export class Header extends Component {
    
    
    send = () => {
    
    
        let name = '点赞关注，好好学前端'
        let arr = [1, 2, 3, 4]
        // 发送事件eventBus.emit('事件名', 参数1, 参数2)
        eventBus.emit('sayHello', name, arr)
    }
    render() {
    
    
        return (
            <div>Header Page
                <button onClick={
    
    this.send}>发送事件给footer组件</button>
            </div>
        )
    }
}

export default Header

兄弟组件B当中接收数据并在处理监听事件的时候进行打印：

import React, {
    
     Component } from 'react'
import eventBus from './event'
export class Footer extends Component {
    
    
    // 添加事件监听,监听从header组件发送过来的sayHello事件
    componentDidMount() {
    
    
        eventBus.addListener('sayHello', this.sayHelloContent)
    }
    // 处理监听事件
    sayHelloContent(a, b) {
    
    
        console.log(a, b)
    }
    // 移除事件监听
    componentWillUnmount() {
    
    
        eventBus.removeListener('sayHello', this.sayHelloContent)
    }
    render() {
    
    
        return (
            <div>Footer</div>
        )
    }
}

export default Footer

点击按钮触发A组件的点击事件，来看一下结果：

这样就完成了兄弟组件之间的传值，下面我们来把用法总结一下：

evenbus用法总结

1. 下载events：

yarn add -D events

2. 新建一个event.js文件写入以下内容：

import {
    
     EventEmitter } from "events"

// 导入事件总线,利用这个对象发射和监听事件,这个对象是全局的
const eventBus = new EventEmitter()

export default eventBus

3. 在需要发送事件的页面引入eventBus,然后使用emit发送事件

// 发送事件eventBus.emit('事件名', 参数)
eventBus.emit('sayHello', name, arr)

4. 在需要接收事件的页面引入eventBus,然后使用addListener监听事件

// 添加事件监听,监听从header组件发送过来的sayHello事件
componentDidMount() {
    
    
    eventBus.addListener('sayHello', this.sayHelloListener)
}
// 处理事件监听
sayHelloListener(a, b){
    
    
    console.log(a, b) // 这样就拿到从另一个兄弟组件中传过来的值了
}

5. 移除事件监听,在生命周期componentWillUnmount中进行

// 移除事件监听
componentWillUnmount() {
    
    
    eventBus.removeListener('sayHello', this.sayHelloListener)
}

好了本篇文章到此结束啦，如果对你有帮助，点赞关注支持一下呀~
后续会给大家带来更多优质内容~