深入理解 Vue 的 bus

Vue 中的事件总线又称为 bus,它是一个 Vue 实例,用于在组件间发送事件和监听事件,实现组件通信。

主要原理是:

1. 注册事件:

js
bus.$on('event-name', callback)

2. 触发事件:

js
bus.$emit('event-name')

3. 解绑事件:

js 
bus.$off('event-name')

举个例子:

组件 A:

js
bus.$on('msg', data => {
  console.log(data.msg)
})

组件 B:

js 
bus.$emit('msg', { msg: 'Hello!' })

那么组件 A 中的回调函数会接收到 { msg: 'Hello!' } 这个参数,并打印 Hello!。

时序图如下：

这个时序图显示了:

1. 组件 A 监听 bus 的 msg 事件,注册了一个 callback 回调函数
2. 组件 B 触发 bus 的 msg 事件,发送 {msg: 'Hello!'} 数据
3. bus 接收到事件,调用 msg 事件的所有回调函数
4. bus 将 {msg: 'Hello!'} 数据作为参数调用组件 A 的 callback 回调函数
5. callback 函数接收到参数,打印 Hello!

这就是 Vue 的事件总线的基本原理和用法。它实现了组件间的松耦合通信,组件可以通过触发事件或监听事件来和其他组件产生联系。