8.7 学习笔记 (全局事件总线,消息订阅与发布)

100 阅读1分钟

在Vue2中,有几种方法可以实现父子组件之间的通信:

  1. Props(属性传递):父组件通过props向子组件传递数据,子组件可以在自己的模板中使用这些属性。父组件可以通过修改props来更新子组件的数据。
  2. 自定义事件:子组件可以通过$emit方法触发一个自定义事件,并将需要传递给父组件的数据作为参数传递。父组件可以在模板中监听这个自定义事件,并在事件处理函数中获取子组件传递的数据。
  3. $refs引用:父组件可以通过ref属性给子组件添加一个引用标识,在父组件中可以直接通过$refs来访问子组件的属性和方法。
  4. EventBus(事件总线):可以创建一个空的Vue实例作为事件中心,然后在父组件和子组件中分别通过onon和emit方法来监听和触发事件。这样就可以在任意组件中进行通信。
  5. 消息订阅
全局事件总线

image.png

image.png

image.png

image.png

消息订阅与发布 (用的不多,不如用全局事件总线)

image.png 发布

image.png 订阅

image.png 用的是第三方库,为了this不出问题,最好用箭头函数

image.png 如果要做的更好,用完销毁

image.png