两个不相关的组件间通信

简介: 在实际的开发中两个组件之间不一定有着强关联。(这里说的强关联指的是父子关系,或者是兄弟关系。)所以我们不能使用对应的策略:父传子 通过@Input子传父 通过@Output兄弟关系通过寻找他们共同的父亲,然后通过子到父在通过父到子之间传递。

在实际的开发中两个组件之间不一定有着强关联。(这里说的强关联指的是父子关系,或者是兄弟关系。)所以我们不能使用对应的策略:

  1. 父传子 通过@Input
  2. 子传父 通过@Output
  3. 兄弟关系通过寻找他们共同的父亲,然后通过子到父在通过父到子之间传递。

但要是没有对应的关联怎么办呢?

今天偶然习得,所以就分享一下。可以通过将关联这两个关系的逻辑方法抽到一个service中,然后在service中定义一个EventEmitter(这个类在之前@Output中有提到过),在事件的触发点进行发射,在处理的地方进行接收即可,简单来说就是起到一个承上启下的作用。

有可能这么说比较抽象,下面举一个简单的例子。

我们一共有两个component:

  1. search
  2. product

需要的功能是这样的:search组件会根据用户输入的查询条件,通过请求后台,将结果显示在component界面上。因为他们都有使用productService,可以这就是个"中间人"。

看一下productService的代码:

//这个就是那个中间人,EventEmitter中的泛型指代的是查询条件  
event: EventEmitter<object> = new EventEmitter();
//这是请求后台的方法
public getProductsByCondition(requestBody: object): Observable<any> {
    return this.http.post('/api/products/condition', requestBody);
  }

看一下提交用户查询条件的方法:

onSearch() {
        //这个是检验表单的字段是否合法
    if (this.formModel.valid) {
      console.log(this.formModel.value);
      //使用那个中间人,发送一个事件
      this.productService.event.emit(this.formModel.value);
    }
  

看一下订阅事件,并且更新product列表显示的地方

//订阅了那个中间人,并且更新商品列表。
this.productService.event.subscribe(params => {
      this.productList = this.productService.getProductsByCondition(params);
    });

梳理一下:主要的思想是将查询条件进行了传递,然后在需要更新的组件中,发送请求,并更新界面。

目录
相关文章
|
6月前
|
存储 JavaScript
组件间通信的方式有哪些优劣势
组件间通信方式多样,包括直接引用、事件触发、状态管理等。直接引用简单直观但耦合度高;事件触发灵活解耦但过度使用会增加调试难度;状态管理适用于复杂应用,维护全局状态,但学习成本较高。
|
7月前
|
JSON JavaScript 小程序
组件的插槽以及组件通信
这篇文章介绍了微信小程序中组件的插槽使用和组件间通信的方法,包括单个插槽、多个插槽的运用,以及属性绑定、事件绑定和获取组件实例的通信方式。
组件的插槽以及组件通信
|
6月前
|
消息中间件 网络协议 API
微服务之间是如何独立通讯的?
微服务之间独立通讯主要依靠定义清晰的API协议、使用轻量级交互机制、以及通过服务发现机制维持服务间连接。微服务体系结构中,每个服务都设计为独立部署的单元,它们通过网络调用彼此的API以实现互操作。
148 0
|
8月前
|
存储 JavaScript 前端开发
如何在组件化中实现组件之间的通信
【8月更文挑战第13天】如何在组件化中实现组件之间的通信
106 3
|
11月前
|
Kubernetes 网络虚拟化 网络架构
k8s 网络组件详细 介绍
k8s 网络组件详细 介绍
|
11月前
组件间的通信
组件间的通信
|
消息中间件 前端开发 JavaScript
解密传统组件间通信与React组件间通信
解密传统组件间通信与React组件间通信
124 0
|
Android开发
浅谈组件之间的通信—EventBus
EventBus是一款针对Andoid优化的发布/订阅事件总线,主要功能是替Intent,Handler,BroadCast在Fragment,Activity,Service,线程之间传递消息,优点是开销小,代码更优雅,以及将发送者和接收者进行解耦
192 0
|
JSON JavaScript 小程序
【小程序】组件通信
【小程序】组件通信
261 0
【小程序】组件通信
|
JavaScript
组件通信BUS模式及原理
vue组件通信方式是个老生常谈的话题了,最全面的莫过于 vuex,最简单的就是父子组件 props 传值,今天我们重点来说说经常提到的 bus 模式。