前言
今天给大家介绍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用法总结
- 下载events：
yarn add -D events- 新建一个event.js文件写入以下内容：
import { EventEmitter } from "events"
// 导入事件总线,利用这个对象发射和监听事件,这个对象是全局的
const eventBus = new EventEmitter()
export default eventBus- 在需要发送事件的页面引入eventBus,然后使用emit发送事件
// 发送事件eventBus.emit('事件名', 参数)
eventBus.emit('sayHello', name, arr)- 在需要接收事件的页面引入eventBus,然后使用addListener监听事件
// 添加事件监听,监听从header组件发送过来的sayHello事件
componentDidMount() {
eventBus.addListener('sayHello', this.sayHelloListener)
}
// 处理事件监听
sayHelloListener(a, b){
console.log(a, b) // 这样就拿到从另一个兄弟组件中传过来的值了
}- 移除事件监听,在生命周期componentWillUnmount中进行
// 移除事件监听
componentWillUnmount() {
eventBus.removeListener('sayHello', this.sayHelloListener)
}好了本篇文章到此结束啦，如果对你有帮助，点赞关注支持一下呀~
后续会给大家带来更多优质内容~
