[JavaScript知识库]Vue-消息订阅与发布

1.定义

1.一种组件间通信方式，适用于任意组件间通信

2.使用步骤：

? 1.安装pubsub: npm i pubsub-js

? 2.引入: import pubsub from ‘pubsub-js’

? 3.接收数据：A组件想接收数据，则在A组件中订阅消息,订阅的回调留在A组件本身

 methods:{
        hello(){
            console.log("school组件发布的消息成功传输到student组件中了");
        }

    },
    mounted(){
        pubsub.subscribe('hello',this.hello)
    },

? 4.提供数据: pubsub.publish(‘xxx’,数据)

? 5.最好在beforeDestroy钩子中用**pubsub.unsubscribe(pid)**去取消订阅

2.示例

案例：兄弟组件间传递数据

订阅消息:

import pubsub from 'pubsub-js'
export default {
    data(){
        return{
     
        }
    },
    methods:{
        hello(){
            console.log("school组件发布的消息成功传输到student组件中了");
        }

    },
    mounted(){
        this.pubid = pubsub.subscribe('hello',this.hello)
    },
    beforeDestroy(){
        pubsub.unsubscribe('pubid')
  }

}

发布消息:

<div class="school">
    <span>{{schoolName}}</span>
    <button @click="sendShoolName">将学校名传给兄弟组件</button>
  </div>

import pubsub from 'pubsub-js'
export default {
  data(){
    return{
      schoolName:'北京大学'
    }
  },
  methods:{
     sendShoolName(){ 
            pubsub.publish('hello',this.schoolName)
        },

  },

}