【framework-1】在vue3里使用rxjs hot observable进行父子通信

我们这里直接用vue3举例,在vue2中整体用法和这个差不多

  • 父组件App.vue
  • 子组件/src/component/HelloWorld.vue

(1) 首先我们在父组件里创建两个hot observable实例,以便在子组件上挂载

import {ref,onUnmounted} from "vue"
...
const appSubject = ref(new BehaviorSubject({}));
const rappSubject = ref(new BehaviorSubject({}));

PS - 两个概念:

  • 发布订阅:
产品经理韩梅梅拉了一个群,群里边叫上了前端、后台和UI,
韩梅梅发布了一篇文档,韩梅梅就是发布者
群里的其他人接收到了这篇文档,群里的其他人就是订阅者
是一种常用的设计模式
  • hot observable
rxjs中的概念,主要是在作为发布订阅的主体
区别于cold observable
cold observable就像听随身听,你打开都能从头听完一首歌
hot observable就像是听现场演唱会,如果来的晚了,只能从现在的演唱曲目听,
前边的过去也就过去了,也就是说前边传递的数据拿不到
这里的BehaviorSubject就是一个hot observable
它区别于Subject这种常规的hot observable,
可以缓存自己传递的最后一个值

(2) 我们在父组件引入HelloWorld子组件,并挂载两个实例

import Hel
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值