网站优化

网站优化

Products

当前位置:首页 > 网站优化 >

阅读Vue Bus总线详解,能掌握构建大型Vue应用的最佳实践吗?

GG网络技术分享 2025-11-10 10:44 4


Vue Bus 总线是一种用于Vue组件之间传信的方法,特别是在非父子组件之间。

Vue Bus 总线的作用

  • 实现非父子组件之间的传信当组件不是父子关系时 老一套的props和events就不再适用,此时Neng用Vue Bus进行传信。

场景

  • 细小项目或数据用频率不高大的项目在数据量不巨大且组件之间传信需求不麻烦的项目中,用Vue BusNeng避免引入Vuex等麻烦的库。

实现方式

  1. 用一个空的Vue实例作为中央事件总线 javascript const EventBus = new Vue; EventBus.$on => { console.log; }); EventBus.$emit;

  2. 用Vue给的Provide/Inject javascript const EventBus = { install { Vue.prototype.$bus = new Vue; } }; export default EventBus;

用Vue Bus

  • 在发送组件中 javascript methods: { handleClick { this.$bus.$emit; } }

  • 在接收组件中 javascript inject: , created { this.$bus.$on => { console.log; }); }

Vue Bus的不优良的地方

  • 维护困难度在组件数量较许多的情况下Vue Bus兴许会使代码变得困难以维护。
  • 巨大型项目不适用对于巨大型项目, Vuex通常是一个geng优良的选择,基本上原因是它给了geng完善的状态管理和可预测的状态变来变去。

Vue Bus是一种轻巧松而有效的组件间传信方法,适用于细小型项目或组件间传信需求不麻烦的情况。

标签:

提交需求或反馈

Demand feedback