通過Context主要實(shí)現(xiàn)的是數(shù)據(jù)的共享，但是在開發(fā)中如果有跨組件之間的事件傳遞，應(yīng)該如何操作呢？

一、安裝events

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

二、events常用的API：

• 創(chuàng)建EventEmitter對象：eventBus對象；
  
  

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

• 監(jiān)聽事件：eventBus.addListener(“事件名稱”, 監(jiān)聽函數(shù))；
  

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

三、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()}>點(diǎn)擊了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;

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。