vue-消息订阅与发布

消息订阅与发布-实现组件间的通信
1.订阅消息:设置消息名 需要数据的组件进行订阅(接收)
2.发布消息:传递消息内容 传递数据的组件进行发布消息

安装pubsub-js

npm i  pubsub-js

发布消息和接收数据的组件都需要引入pubsub

import pubsub from 'xxx'

使用方法:

组件A(发布消息)
数据:
return{
  person:{
    id:001,
    name:'卡卡',
    age:20
  }
}

 methods: {
    demo() {
      // 提供数据
      pubsub.publish("sub-x", this.person);
    },
  },

组件B(接收消息)
 methods:{
     mounted() {
    // 每次订阅都会生成一个pubId,如果把回调函数放这里最好使用箭头函数
    this.pubId = pubsub.subscribe("sub-x", data => {
      console.log(data);
    });
  },
 }

取消订阅:

 beforeDestroy() {
    pubsub.unsubscribe(this.pubId);// 取消订阅
  },