九、组件间通信

一、组件间通信

方式一: 通过props传递

1. 共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
2. 通过props可以传递一般数据和函数数据, 只能一层一层传递
3. 一般数据-->父组件传递数据给子组件-->子组件读取数据
4. 函数数据-->子组件传递数据给父组件-->子组件调用函数

方式二: 使用消息订阅(subscribe)-发布(publish)机制

1. 工具库: PubSubJS
2. 下载: npm install pubsub-js --save
3. 使用:

           import PubSub from 'pubsub-js' //引入

           PubSub.subscribe('delete', function(data){ }); //订阅

           PubSub.publish('delete', data) //发布消息

https://github.com/mroderick/PubSubJS

方式三: redux

后面专门讲解

 

二、PubSubJS的应用

在react练习，根据关键字查询用户章节中，搜索框的关键字是通过传递给父组件，然后父组件传递给列表组件的，

使用PubSubJS直接把输入的关键字通过搜索框组件传递给列表组件（也就是兄弟组件之间传递，不限于兄弟组件之间，组件之间都可以用这种方式）。

在搜索框组件中发布消息（相当于触发事件）

//PubSub.publish('消息名', 发送的数据) //发布消息
PubSub.publish('search', searchName) //发布消息

 

在列表组件中订阅接收消息（订阅相当于绑定监听）

//PubSub.subscribe('消息名', 回调函数)
初始化的时候就订阅消息
componentDidMount(){
    //订阅消息
    PubSub.subscribe('search',(msg, searchName)=> {
    console.log( msg, searchName);//searchName就是接收到的数据

    //ajax请求数据
})



}

其实就是在搜索框组件中发布消息把要搜索的关键字发布出去，然后在列表组件中订阅的回调函数接收发送的关键字。

发布消息---》订阅接收消息