pubsub.js消息的发布订阅

pubsub.js消息的发布订阅

• 组件间数据的传递方式
  • props，一层一层传递
  • 消息的发布订阅，当嵌套层数比较多，可以用此工具库
• 下载

  $ npm install pubsub-js --save
  

• 使用

  // 导入
  import PubSub from "pubsub-js"
  
  // 在有数据的地方进行发布
  class Data extends React.Component{
    pubmsg = ()=>{
        PubSub.publish("频道","频道发布的消息")
    }
    render() {
        return(
            <button onClick={this.pubmsg}>Data组件,发布消息</button>
            )
        }
    }
    
    // 订阅
    class App extends Component {
      // 组件将要被渲染的时候进行订阅
      componentWillMount() {
        PubSub.subscribe("频道", (msg,data)=> {
          console.log(msg,data)
        })
      }
    
      render() {
        return (
          <div className="App">
             <Data />
          </div>
        );
      }
    }