组件间通信 ：props、消息订阅发布 Pubsub-js

组件间通信传递参数有两种一种是通过props传递参数，还有一种通过消息订阅发布传递

方式一: 通过props传递

特点：

•     共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
•     通过props可以传递一般数据和函数数据, 只能一层一层传递

传递一般数据：
  传递顺序：  一般数据-->父组件传递数据给子组件-->子组件读取数据

父组件App给嵌套的子组件Children传递数据（data),通过给子组件添加comments属性，然后再赋值，这样父组件的data属性值就传递到了Children的props对象中了。例子如下：

import React from 'react';


class App extends React.Component {

  constructor (props) {
      super(props)

      this.state = {
          data: 'nihao'
      };
  }
   
  render () {
    return (
      <div>
          <Children comments={this.state.data} />
      </div>
    );
  }
}

export default App;

父组件可以给子组件传递数据，如果父组件需要子组件的数据改怎么传递呢，讲一下

子组件给父组件传递数据：

    * 函数数据-->子组件传递数据给父组件-->子组件调用函数

子组件给父组件传递数据，可以现在父组件中定义一个delete方法,方法名随意，然后通过props给子组件赋值delete={this.delete}，这样子组件就可以操作父组件的delete方法了，

import React from 'react';

class App extends React.Component {

  constructor (props) {
    super(props)

    this.state = {
      comments: ''
    };

    this.delete = this.delete.bind(this);
  }


  delete (word) {
    let comments = this.state.comments;
    this.setState({ comments });
  }

  render () {
    return (
      <div>
          <Children comments={this.state.comments} delete={this.delete}/>
      </div>
    );
  }
}

export default App;

然后在子组件中就可以通过props调用此方法，给父组件传递数据，操作父组件的state了.

 this.props.delete('hahah');

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

用此种方式需要用到一个工具库: PubSubJS

 npm install pubsub-js --save

这种方法传递数据非常简单，只需三步

1.在组件中引入

import Pubsub from 'pubsub-js'

 2.订阅

  componentDidMount() {
        /**
         * 订阅
         */
        // 绑定一个事件名为topic的自定义事件
       Pubsub.subscribe('topic', (msg, data) => {
            console.log(msg) // 这里将会输出对应设置的 pubsubID
            console.log(data) // 这里将会输出对应设置的参数
        })
    }

3.发布

Pubsub.publish('topic','haha');

参数一：订阅的主题，唯一

参数二：要发布传递的数据