「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」

全局事件总线

进行任意组件间的通信

我们要找到像图中的x一样的东西，谁都可以找到它绑定事件，且谁都可以找到它触发事件( $on、$ off、$emit) 。我们可以将这个东西命名为bus公交车，公共的工具，谁都能用

$on绑定事件，设置回调函数。

$emit触发事件，传递数据。

数据一旦被触发，就会执行回调函数，用形参来接收传递过来的数据。

综上，我们要将这个bus放在Vue的原型对象上，这样vm和vc就都能通过原型链使用它

那么这个bus的具体内容是啥呢？

Vue原型对象上的属性和方法( $on、$ off、$emit)，只有vm或者vc才能通过原型链去使用

所以让bus等于vm或者vc，就可以使用原型对象上的这些方法了

一般让bus等于vm，这样比较简单

// 在main.js中，安装全局事件总线

// 我们要在创建vm的时候，通过beforeCreate钩子来安装全局事件总线
const vm  = new Vue(
	el: '#app',
  render: h => h(App),
  beforeCreate(){
  	Vue.prototype.$bus = this			// 安装全局事件总线 
    // 生命周期函数里面的this指向的都是Vue实例vm
    // 这里不能直接写vm，因为这时候vm还没被创建
  }
  
)

在组件数据传递时

收数据的组件要绑定自定义事件，通过生命周期函数mounted，组件一挂载就绑定 $on（this.$ bus.$on）

(通常情况下，也要通过生命周期函数beforeDestroy，在组件销毁之前解绑事件 this.$bus.off )

发数据的组件要声明自定义事件(触发)，并且传递数据 $emit()（this.$ bus.$emit）

收数据的组件中自定义事件被触发，执行回调函数，通过形参接收传来的数据

消息订阅与发布

需要借助第三方库，以pubsub.js为例

安装

npm i pubsub-js

引入 --> import pubsub from 'pubsub-js'

哪个组件接收数据，就在哪个组件引入pubsub.js

引入的pubsub是一个对象，只要组件挂载完毕，就立刻订阅消息，订阅一个消息会得到一个id

<script>
	mounted(){
		// this.pubId = pubsub.subscribe('消息的名称',回调函数)
		// 回调函数可以传入两个形参，一个接收消息名称，一个接收传入的数据
	
		this.pubId = pubsub.subscribe('hello', function(msgName, data){				
			console.log('有人发布了hello消息，并且执行了hello消息的回调函数', data)
		})
	}
</script>

// 关于this指向的问题
// pubsub.js是一个第三方库，回调函数中的this指向的是undefined
//  我们可以不写普通函数，而是用箭头函数来写订阅消息的回调，这样函数里面的this就指向的是当前组件的实例对象vc
// 还可以将回调函数写在methods节点中，然后在订阅消息的时候通过this来使用回调

哪个组件发布消息，这个组件也要引入pubsub.js

// 如：点击按钮发送消息
<template>
	<button @click="sendMsg"></button>
</template>

<script>
	methods: {
		sendMsg(){
			pubsub.publish('消息的名称', 传递的数据)
		}
}
</script>

在组件销毁的时候要取消消息订阅

注意要获取到消息订阅的id，通过id来取消订阅

<script>
  
	beforeDestroy(){
		// pubsub.unsubscribe(消息订阅的ID)
		pubsub.unsubscribe(this.pubId)
	}
  
</script>

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖

🤟🏼 冇事来学系--Vue2.0中全局事件总线和消息订阅与发布

全局事件总线

消息订阅与发布

跋尾