Vue中Peer组件的总线通信方式

SPA中,经常采用组件化开发的方式,其中父子组件可以使用@xxx$emit的方式进行通信,但是兄弟组件(如图中第三层的任意两个组件)间的通信,则需要使用总线进行通信。即观察者设计模式。

示例如下:

Vue中Peer组件的总线通信方式

Vue中Peer组件的总线通信方式

开始页面上有两个child组件,通过父组件传入不同的值分别具有不同的内容,现在想要实现的功能是,点击任意一个组件,使另一个组件变成与自己相同的内容。

在代码中可以看出,这两个组件是同级的组件,所以需要引入总线实现通信。

Vue中Peer组件的总线通信方式

最终效果:

Vue中Peer组件的总线通信方式

相关文章:

  • 2022-12-23
  • 2021-08-09
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2023-04-11
  • 2022-02-20
  • 2022-12-23
猜你喜欢
  • 2021-11-05
  • 2021-08-27
  • 2022-12-23
  • 2021-08-21
  • 2022-12-23
  • 2022-03-02
相关资源
相似解决方案