vue采用EventBus实现跨组件通信及注意事项小结

大佬教程收集整理的这篇文章主要介绍了vue采用EventBus实现跨组件通信及注意事项小结，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

EventBus

EventBus是一种发布/订阅事件设计模式的实践。

在vue中适用于跨组件简单通信，不适应用于复杂场景多组件高频率通信，类似购物车等场景状态管理建议采用vuex。

挂载EventBus到vue.prototype

添加bus.js文件

 {
 const eventHub = new Vue()
 Vue.prototype.$bus = {
 /**
  * @param {any} event 第一个参数是事件对象，第二个参数是接收到消息信息，可以是任意类型
  * @method $on 事件订阅,监听当前实例上的自定义事件。https://cn.vuejs.org/v2/api/#vm-on
  * @method $off 取消事件订阅，移除自定义事件监听器。 https://cn.vuejs.org/v2/api/#vm-off https://github.com/vuejs/vue/issues/3399
  * @method $emit 事件广播,触发当前实例上的事件。 https://cn.vuejs.org/v2/api/#vm-emit
  * @method $once 事件订阅,监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。 https://cn.vuejs.org/v2/api/#vm-once
  */
  $on (...event) {
   eventHub.$on(...event)
  },$off (...event) {
   eventHub.$off(...event)
  },$once (...event) {
   eventHub.$emit(...event)
  },$emit (...event) {
   eventHub.$emit(...event)
  }
 }
}
注册
//main.js
import BUS from './service/bus'
BUS(VuE)

大佬总结

以上是大佬教程为你收集整理的vue采用EventBus实现跨组件通信及注意事项小结全部内容，希望文章能够帮你解决vue采用EventBus实现跨组件通信及注意事项小结所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。