pubsub.js消息的发布订阅

组件间数据的传递方式

• props，一层一层传递
• 消息的发布订阅，当嵌套层数比较多，可以用此工具库

下载

$ npm install pubsub-js --save

语法

PubSub.publish('订阅名', data)			//发布消息
PubSub.subscrib('订阅名', (msg,data) => {} )		//订阅消息
PubSub.unsubscribe('订阅名ID号')			//取消订阅

使用

// 导入
import PubSub from "pubsub-js"

// 在有数据的地方进行发布
class Data extends React.Component{
  pubmsg = ()=>{
      PubSub.publish("订阅名","data")
  }
  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>
      );
    }
  }

vue写法

<!-- App父组件 -->
<template>
  <div>
    <Item/>
    <input type="text" v-model='pubsubTest'>
    <button @click='pub'>发布消息</button>
  </div>
</template>

<script>'
  export default {
    name: 'App',
    components: {
      Item			//子组件
    },
    data () {
      return {
        pubsubTest: ''
      }
    },
    methods: {
      pub () {
      	//订阅名 是发布名称，data 是传递参数
        let data = this.pubsubTest
        PubSub.publish('订阅名',data)		
      }
    }
  }
</script>

<!-- Item子组件 -->
<template>
    <div>
        <input type="text" v-model='subTest'>
        <button @click='sub'>订阅消息</button>
      </div>
    </div>
</template>

<script>
  import PubSub from 'pubsub-js'
    export default {
      data () {
        return {
          subTest: ''
        }
      },
      name: "List",
      methods: () {
      	sub () {
      	   //订阅信息
      	  //msg 指'订阅名'方法， data 指传过来的参数
          this.pubId = PubSub.subscribe('订阅名',(msg, data) => {		
            this.subTest = data
            console.log("有人发布了msg信息",data)
          })
        }
      },
      // 取消订阅
      beforeDestroy() {
        pubSub.unsubscribe(this.pubId)
    },
    }
</script>