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;}
就完成了子组件向父组件的通讯。
