day83-消息的订阅与发布

消息的订阅与发布

一种组件之间通信的方式，适用于各种组件通信

安装pubsub库用来订阅和发布消息

首先引入pubsub库

 import pubsub from "pubsub-js";

 

订阅消息（school组件）

methods:{
   demo(msgName,data){
     console.log('hello 回调',msgName,data)
   }
 },
 mounted() {
   // console.log('school',this)
   // this.$bus.$on('hello',(data)=>{
   //   console.log('school get ',data)
   // })
   this.pubId = pubsub.subscribe('xixi',this.demo)
 },
 beforeDestroy() {
   // this.$bus.$off('hello')
   pubsub.unsubscribe(this.pubId)
 }

 

发送消息（student组件）

 methods:{
   sendStudentName() {
     // this.$bus.$emit('hello',this.name)
     pubsub.publish('xixi',666)
   }
 }

 

总结

 /*
  消息的订阅预发布
   1.一种组件之间通信的方式，适用于任意组件间通信
   2.使用步骤：
     1.安装pubsub：npm i pubsub-js
     2.引入：import pubsub from 'pubsub-js'
     3.接收数据:a组件想接收数据，则在a组件中订阅消息，消息的回调在a组件自身
       methods(){
         demo(data){......}
       }
       .....
       mounted(){\
       this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息
       }
       4.提供数据： pubsub.publish('xxx',数据)
       5.最好在beforedestroy钩子中用pubsub.unsubscribe(pid) 去取消订阅
 */