組件通信之全局事件總線 & 消息訂閱發布

全局事件總線

介紹

一種組件間通信的方式，適用於任意組件間通信。

在使用全局事件總線之前需要一些知識准備

所有組件實例的原型對象的原型對象就是 Vue 的原型對象，即VueComponent.prototype.__proto__ === Vue.prototype

1. 所有組件對象都能訪問 Vue 原型對象上的屬性和方法
2. Vue.prototype.x = new Vue()，所有的組件對象都能看到x 這個屬性

正是由於所有組件都可以訪問Vue原型對象上的屬性，如果我們將想要交戶的屬性或方法定義在Vue原型對象

上，就可以實現任意組件之間的通信

使用之前需要了解的Vue 原型對象上包含事件處理的方法

• $on(eventName, listener): 綁定自定義事件監聽
• $emit(eventName, data): 分發自定義事件
• $off(eventName): 解綁自定義事件監聽
• $once(eventName, listener) : 綁定事件監聽, 但只能處理一次

使用

定義全局事件總線

//vue入口文件main.js
new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安裝全局事件總線，$bus就是當前應用的vm
	},
    ......
}) 

使用

//接收數據方：$on
methods:{
  demo(data){......}
},
......
mounted() {
  //this.$bus.$on('xxxx',this.demo)
   // 或直接使用回調函數，切記是箭頭函數，不然this不是當前組件
    this.$bus.$on('xxxx',()=>{})
    
},
beforeDestroy() {
     this.$bus.$off('hello')
}

最好在beforeDestroy鈎子中，用$off去解綁當前組件所用到的事件，否則總線的負擔會很重

//發送數據方：$emit
this.$bus.$emit('xxxx',數據)

消息訂閱與發布（pubsub）

一種組件間通信的方式，適用於任意組件間通信。可以形象地理解為收音機切換到某個指定頻率才能接收該頻率的消息

使用步驟

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) //訂閱消息
},
//銷毀    
beforeDestroy() {
    pubsub.unsubscribe(this.pubId)
},    

//提供數據方
pubsub.publish('xxx',數據)