通過Context主要實現的是數據的共享，但是在開發中如果有跨組件之間的事件傳遞，應該如何操作呢？

一、安裝events

• 在Vue中我們可以通過Vue的實例，快速實現一個事件總線（EventBus），來完成操作；
• 在React中，我們可以依賴一個使用較多的庫 events 來完成對應的操作；我們可以通過npm或者yarn來安裝events：
  

二、events常用的API：

• 創建EventEmitter對象：eventBus對象；
  
  

• 發出事件：eventBus.emit(“事件名稱”, 參數列表);
  

• 監聽事件：eventBus.addListener(“事件名稱”, 監聽函數)；
  

• 移除事件：eventBus.removeListener(“事件名稱”, 監聽函數)；
  

三、events案例

import React, { PureComponent } from "react"; import PropTypes from "prop-types"; import { EventEmitter } from "events";// 事件總線：event bus const eventBus = new EventEmitter();class Home extends PureComponent {render() {return <div>Home</div>;}componentDidMount() {eventBus.addListener("sayHello", this.handleSayHelloListener);}componentWillUnmount() {eventBus.removeListener("sayHello", this.handleSayHelloListener);}handleSayHelloListener(message, num) {console.log(message, num);} }class Profile extends PureComponent {render() {return (<div>Profile<button onClick={(e) => this.emmitEvent()}>點擊了profile按鈕</button></div>);}emmitEvent() {eventBus.emit("sayHello", "Hello Home", 123);} }class App extends PureComponent {render() {return (<div><Home></Home><Profile></Profile></div>);} }App.propTypes = {};export default App;

總結

以上是生活随笔為你收集整理的React事件总线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。