Vue 消息订阅

简介

1. 这种方式的思想与全局事件总线很相似

2. 它包含以下操作:

• 订阅消息 --对应绑定事件监听

• 发布消息 --分发事件

• 取消消息订阅 --解绑事件监听

3. 需要引入一个消息订阅与发布的第三方实现库: PubSubJS

使用PubSubJS

• 在线文档: https://github.com/mroderick/PubSubJS

• 下载: npm install -S pubsub-js

• 相关语法

  • import PubSub from ‘pubsub-js’ // 引入
  • PubSub.subscribe(‘msgName’, functon(msgName, data){ })
  • PubSub.publish(‘msgName’, data): 发布消息, 触发订阅的回调函数调用
  • PubSub.unsubscribe(token): 取消消息的订阅

例子

Student组件 向 School组件共享数据

导入pubsub-js

import pubsub from 'pubsub-js'

• School.vue

mounted() {
    /* this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			}) */
    this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
        console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
    })
},

• Student.vue

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