angular入门基础教程(五）父子组件的数据通信

组件之间的通信是我们业务开发中少不了的,先了解下父子组件的通信

父组件传数据给子组件

前面，我们学会会动态属性的绑定，所以在父组件中给子组件绑定属性，在子组件中就可以使用这个属性了。

• 父组件中声明然后赋值

export class AppComponent {
  money = 100;
}

<main class="main">
  <p>Welcome to Angular!{{name}}</p>
  <h3>下面是子组件的内容</h3>
  <p>这是父组件的存款:{{money}}</p>
  <app-user-list [childMoney]="money" />
</main>

• 子组件里面接受这个属性

注意，这里我们使用@Input()装饰器来接受这个属性。值类型必须保持一致，否则会报错。

import { Component, Input } from '@angular/core';
export class UserListComponent {
  @Input() childMoney = 0;
}

显示父组件传过来的值

 <p>
    这里是子组件的money:{{childMoney}}
</p>

子组件传数据给父组件

• 子组件

<p>这里是子组件的money:{{childMoney}}</p>
<button (click)="handleAdd()">赚钱</button>
<button (click)="handledec()">花钱</button>

const core里面引入EventEmitter,用来发射事件。Output声明一个事件发射器，用来发射事件。

  import { Component, EventEmitter, Input, Output } from '@angular/core';

  @Output() incrementCountEvent = new EventEmitter<number>();
  handleAdd() {
    this.incrementCountEvent.emit(1);
  }
  handledec() {
    this.incrementCountEvent.emit(-1);
  }

• 父组件
  自定义事件，使用()绑定事件。接受参数，使用$event来接受。

<app-user-list [childMoney]="money" (incrementCountEvent)="handleChange($event)" />

 handleChange($event: any) {
    this.money += $event;
  }

就完成了子组件向父组件的通讯。