全域性事件匯流排

介紹

一種元件間通訊的方式，適用於任意元件間通訊。

在使用全域性事件匯流排之前需要一些知識準備

所有元件例項的原型物件的原型物件就是 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',資料)