组件化开发（四）：非父子通信-事件总线及在Vue项目中使用EventBus的例子

文章目录

• • • • 1.事件总线(eventBus)
  • • 定义
    • 用途
    • 原理

• 第二章 eventBus 使用路径

• 在网页环境中部署 eventBus 并实现其功能时，请注意以下要点：通过构建消息队列机制来模拟公众号与用户的双向通信过程。

• • 代码

• 输出结果

• 4.在vue项目中使用事件总线：通过点击增减按钮来实现数值的增减。

• • 4.1.初始化阶段的主要步骤是生成一个事件总线实例。
  • 4.2.发送数据前，请确保先导入eventBus包，在其中调用$emit方法将数据传递出去。

  • • 子组件IncrementCount 和 DecreaseCount具体功能：

    • 增量组件IncrementCount用于执行增1操作；

    • 减量组件DecreaseCount负责执行减1操作。

      • 4.3.接收事件:导入$on，使用$on接收数据

    • 5.总结

1.事件总线(eventBus)

定义

vue实例赋值给一个变量,就是中央事件总线

    var bus=new Vue();

用途

实现跨组件传输

原理

以eventBus为媒介实现各组件间的无缝连接，在同