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)
    }
},