Vue cli 消息订阅与发布

一、作用

任意组件间通讯

二、使用

1、安装pubsub

npm install pubsub-js

2、引入

import pubsub from 'pubsub-js'

3、接受数据(订阅)

a、引入

import pubsub from 'pubsub-js'

b、回调方法

methods: {// 注意两个参数，第一个参数是 'msg'，用不到用‘_’代替
    test(_, value){console.log('消息订阅发布',value)}
},

c、挂载

mounted() {// 开启订阅，注意回调函数默认传两个参数，第一个不是值this.pid = pubsub.subscribe('msg', this.test)  
},

d、关闭（防止浪费资源）

beforeDestroy(){// 关闭 订阅pubsub.unsubscribe(this.pid)
}

4、提供数据(发布)

1、引入

import pubsub from 'pubsub-js'

2、触发

methods: {sendMsg(){// 发布数据pubsub.publish('msg', this.name)}
},