event(事件订阅)是react新增的通信方式。它类似webSorcket和postMessage的通信方式,一边发送传值,另一边监听接收. 适合兄弟组件传值
安装event
代码语言:javascript复制1yarn add event
创建实例
new一个event实例,文件,方便使用
代码语言:javascript复制1import { EventEmitter } from "events"; //引入插件
2export default new EventEmitter(); // 导出一个event实例
接收值
在需要接收值的组件里,调用event实例的addListener方法,创建一个监听事件,接收值
代码语言:javascript复制1import React,{useState, useEffect} from "react";
2import emitter from "./event";
3
4const Child = () => {
5
6 const [val,setVal] = useState("初始值")
7
8 useEffect(()=>{
9 const listenerFn = data=>{
10 // 接收传过来的值
11 setVal(data)
12 }
13 // 创建监听事件
14 emitter.addListener("callMe",listenerFn)
15
16 // 销毁监听
17 return ()=>emitter.removeListener("callMe",listenerFn)
18
19 },[])
20
21 return (
22 <div>
23 {val}
24 </div>
25 );
26};
27
28export default Child;
发送值
在需要发送值的组件里,调用event实例的emit方法,发送值
代码语言:javascript复制1import React from "react";
2import emitter from "./event";
3
4
5const Bor = () => {
6
7 const handlePush = ()=>