组件间交互的实现

2023-10-11 13:19:59

低代码平台通过组件封装，简化了前端开发，那么组件与组件之间是如何进行交互的呢？

事件触发

最常见的方式是通过事件触发。组件可以暴露事件，其他组件可以监听这些事件。当事件触发时，监听事件的组件可以执行相应的操作。例如，一个按钮组件可以暴露一个单击事件，当用户单击按钮时，监听单击事件的组件可以执行诸如导航到另一个页面或更新数据等操作。

数据绑定

另一种常见的方式是数据绑定。组件可以将数据与其他组件共享。当数据发生变化时，绑定的组件将自动更新。例如，一个输入组件可以将输入值与其他组件绑定的数据模型共享。当用户更改输入值时，绑定的组件将自动更新其数据模型。

其他方式

除了事件触发和数据绑定之外，还有其他方式实现组件间交互，例如：

消息传递： 组件可以通过消息总线或其他机制发送和接收消息。
依赖注入： 组件可以通过依赖注入框架获得其他组件的引用。
状态管理： 组件可以通过全局状态管理系统共享状态信息。

具体到手撸平台，组件间交互主要是通过事件触发和数据绑定的方式实现的。

在上一篇文章中，我们已经介绍了如何创建自定义组件。接下来，我们来看看如何实现组件间的交互。

事件触发

事件触发是组件间交互最常用的方式。组件可以通过 @Emit() 装饰器暴露事件，其他组件可以通过 @Listen() 装饰器监听这些事件。当事件触发时，监听事件的组件可以执行相应的操作。

例如，我们可以创建一个按钮组件，并暴露一个 click 事件：

import { Component } from '@angular/core';

@Component({
  selector: 'button-component',
  template: `<button (click)="onClick()">按钮</button>`,
})
export class ButtonComponent {
  @Emit() onClick = new EventEmitter();
}

然后，我们可以创建一个另一个组件，并监听 click 事件：

import { Component } from '@angular/core';

@Component({
  selector: 'listener-component',
  template: `<button-component (click)="onClick($event)"></button-component>`,
})
export class ListenerComponent {
  onClick(event) {
    console.log('按钮被点击了！');
  }
}

当用户点击按钮时，onClick 事件将被触发，并且 ListenerComponent 中的 onClick 方法将被调用。

数据绑定

数据绑定是组件间交互的另一种常见方式。组件可以通过 @Input() 和 @Output() 装饰器绑定数据。@Input() 用于将数据从父组件传递到子组件，而 @Output() 用于将数据从子组件传递到父组件。

例如，我们可以创建一个输入组件，并绑定一个 value 属性：

import { Component } from '@angular/core';

@Component({
  selector: 'input-component',
  template: `<input [(ngModel)]="value">`,
})
export class InputComponent {
  @Input() value: string;
}

然后，我们可以创建一个另一个组件，并绑定 value 属性：

import { Component } from '@angular/core';

@Component({
  selector: 'bind-component',
  template: `<input-component [value]="value" (valueChange)="onValueChange($event)"></input-component>`,
})
export class BindComponent {
  value: string;

  onValueChange(event) {
    console.log('输入值改变了！');
  }
}