这次给大家带来vue组件通信bus使用方法，vue组件通信bus使用的注意事项有哪些，下面就是实战案例，一起来看一下。
在vue2.0中 $dispatch 和 $broadcast 已经被弃用。官方文档中给出的解释是：
因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题。
官方推荐的状态管理方案是 vuex。不过如果项目不是很大，状态管理也没有很复杂的话，使用 vuex 有种杀鸡用牛刀的感觉，当然，这也是要根据自己的需求来的，只是建议。
其实关于这个非父子组件通信的demo还是有的，它藏在了$dispatch 和 $broadcast的迁移文档中，有兴趣的小伙伴可以点击进去查看。文档中的建议就是：
对于$dispatch 和 $broadcast最简单的升级方式就是：通过使用事件中心，允许组件自由交流，无论组件处于组件树的哪一层。由于 vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 vue 实例来实现这个目的。
这个集中式的事件中间件就是 bus。我习惯将bus定义到全局：
app.js
var eventbus = {  install(vue,options) {   vue.prototype.$bus = vue  } }; vue.use(eventbus);
然后在组件中，可以使用$emit， $on， $off 分别来分发、监听、取消监听事件：
分发事件的组件
// ... methods: {  todo: function () {  this.$bus.$emit('todosth', params); //params是传递的参数  //...  } }
监听的组件
// ... created() {  this.$bus.$on('todosth', (params) => { //获取传递的参数并进行操作   //todo something  }) }, // 最好在组件销毁前 // 清除事件监听 beforedestroy () {  this.$bus.$off('todosth'); },
如果需要监听多个组件，只需要更改 bus 的 eventname:
// ... created() {  this.$bus.$on('firsttodo', this.firsttodo);  this.$bus.$on('secondtodo', this.secondtodo); }, // 清除事件监听 beforedestroy () {  this.$bus.$off('firsttodo', this.firsttodo);  this.$bus.$off('secondtodo', this.secondtodo); },
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
swiper插件怎样切换箭头按钮
vue+swiper如何实现侧边栏菜单
以上就是vue组件通信bus使用方法的详细内容。