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

---

theme: orange

「这是我参与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，这样比较简单

```js // 在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为例

---

1. 安装

npm i pubsub-js

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

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

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

```js

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

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

``` // 如：点击按钮发送消息

```

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

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

```js

```

跋尾

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