Vue61-消息订阅与发布-任意组件之间的通信

 一、原理图

原生的JS不能实现订阅与发布,要借助第三方库:pubsub-js(任何一个框架都能用!)

二、案例实现

school组件,需要数据(订阅消息),student组件提供数据(发布消息),两者是并列关系。

2-1、消息的订阅与发布 

注意:引入的pubsub是对象!

参数接收如下:

2-2、取消订阅 

组件即将销毁,也要取消订阅!

 2-3、订阅消息中的this

因为pubsub是第三方的库,所以,vue不管里面的this。

解决方式1:箭头函数

解决方式2:在methods中写回调函数,pubsub中调用:

三、小结

消息订阅与全局事件总线,很类似,就相当于把全局事件总线中的x换成了pubsub,所以vue中用的不多。

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-18 23:34:01       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-18 23:34:01       106 阅读
  3. 在Django里面运行非项目文件

    2024-06-18 23:34:01       87 阅读
  4. Python语言-面向对象

    2024-06-18 23:34:01       96 阅读

热门阅读

  1. 算法设计与分析

    2024-06-18 23:34:01       32 阅读
  2. 定义仅限关键字参数

    2024-06-18 23:34:01       25 阅读
  3. NumPy 切片和索引

    2024-06-18 23:34:01       25 阅读
  4. 关于CSS

    关于CSS

    2024-06-18 23:34:01      29 阅读
  5. TOP150-LC121-买卖股票的最佳时机

    2024-06-18 23:34:01       32 阅读
  6. CSS 表单设计指南

    2024-06-18 23:34:01       31 阅读
  7. Samba服务访问异常分析处理

    2024-06-18 23:34:01       23 阅读
  8. 华为OD机试 C++ - 生日礼物

    2024-06-18 23:34:01       27 阅读
  9. Rust 的编译时间过长

    2024-06-18 23:34:01       27 阅读
  10. 软件开发小程序正规公司流程是什么样的?

    2024-06-18 23:34:01       32 阅读
  11. sklearn快速入门教程 ——2.基本数据探索

    2024-06-18 23:34:01       35 阅读