# day01_react

**Repository Path**: gao-yanfeng/day01_react

## Basic Information

- **Project Name**: day01_react
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-21
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 父子组件通讯

在父组件中 定义一个事件名，子组件中用props接受事件名 

列:父组件

```react
//引入子组件
import Header from "../Header";
//给子组件传递数据
<Header title="我是父组件传递的数据"/>
```

子组件

```react
constructor(props){
	super(props)
	this.state = {
        //接收数据
		title:this.props.title,
	}
}
```

#### 子父组件通讯

在父组件中 定义一个函数, 在父组件中的子组件标签中添加一个自定义事件名，子组件通过props触发事件,

列:父组件

```react
//定义的函数
A(messages){
    console.log(messages);
    //输出结果 我是子组件传递的数据
}
//子组件标签 绑定自定义事件
<Header message="this.A"/>
```

子组件

```react
constructor(props){
	super(props)
}
<button onclick={()=>{
        //触发自定义事件
        this.props.message("我是子组件传递的数据")
    }}></button>
```



#### 兄弟组件通讯

首先创建一个空的JS文件,来作为一个中介， 里面写 

```javascript
import {EventEmitter} from "events";

export default const eventEmitter = new EventEmitter();
```



###### 兄弟组件1接受信息

```react
import eventEmitter from "./event";
//通过生命周期
//创建
componentDidMount(){
    //监听事件
    eventEmitter.addListener("自定义事件名",(参数)=>{
        console.log(参数)
    })
}
```

###### 兄弟组件2传递信息

```react
//引入空的JS文件
import eventEmitter from "./event";

通过 eventEmitter.emit("自定义事件名",要传递的数据) 来进行数据传递
```