写播放器项目时，需要将播放链接从推荐组件传到播放器组件，但它们的关系又是下图这样的😓

没有父子关系，Vue也没有为这种非父子关系的组件提供传输数据的方法，于是搜索到使用公共bus组件来完成这一操作，记录下来。

1. 新建eventBus.js

在项目根路径下新建eventBus.js，内容为

1
2
import Vue from 'vue'
export default new Vue()

2. $emit方法存入数据

这里我在推荐组件中存入播放链接

先导入bus

1
import bus from '../../eventBus.js'

然后使用$emit方法存入数据

1
bus.$emit('data', url)

3. $on方法使用数据

同样需要导入bus

这里通常挂载监听在Vue生命周期created和mounted当中的一个.

切换到播放器组件，在mounted钩子函数中使用$on方法调用数据

1
2
3
bus.$on('data', (url) => {
  this.url = url
}

4. 清除eventBus

最后，在beforeDestroy或者destroyed中用Vue实例的$off方法清楚eventBus

1
bus.$off('data')

因为不手动清除，它是会一直存在的。这样的话，就会出现反复进入到传递数据的组件内获取数据的问题，原本只执行一次的获取的操作将会执行多次。项目大了的话是会影响性能的👀，反正记得清楚事件总线。

5. 参考