如今的前端開發，都朝組件式開發模式靠攏，如果使用目前最流行的前端框架Angular和React開發應用，不可避免地需要開發組件，也就意味著我們需要考慮組件間的數據傳遞等問題，不過Angular 2已經為我們提供了很好的解決方案。

父組件和子組件

接觸過面向對象編程的開發者肯定不會對父子關系陌生，在Angular 2中子組件存在于父組件“體內”，并且父子組件可以通過一些渠道進行通訊。

父組件向子組件傳入數據 – @Input

當我們著手開始開發一個組件時，第一件想到的應該就是為其傳入數據，畢竟我們期望組件為我們處理某些工作通常就需要給其提供“養料”，畢竟不能又讓馬兒跑，又不給馬兒吃草。Angular 2中子組件使用裝飾器@Input接收父組件傳入的數據：

// child-component.tsimport { OnInit, Component, Input } from '@angular/core';@Component({  selector: 'child-component',  ...})export class ChildComponent implements OnInit {  @Input  count: number = 0;  ngOnInit() {    console.log(this.count);  // 父組件內傳入的值或者我們自己設置的初始值0  }  increaseNumber() {    this.count ++;  }  descreaseNumber() {    this.count --;  }}

可以看到，我們使用裝飾器@Input修飾了count屬性，這就意味著child-component被使用時期望收到一個名為count的屬性，當然不屬于自己掌控的范圍內要小心行事，別人使用我們的組件時什么情況都可能出現，所以我們為count設置了一個初始值，當父組件沒有給我們的count屬性傳值時，我們就取此初始值。

// father-component.tsimport { Component } from '@angular/core';import { ChildComponent } from '../child-component/child-component';@Component({  template: `    <child-component [count]='initialCount'></child-component>  `,  ...})export class FatherComponent {  initialCount: number = 5;}

父組件使用child-component時，為count屬性賦予初始值initialCount，即5，也就是說此時ChildComponent的ngOnInit方法中會打印出5。注意[count]語法標識了數據流向：父組件流入子組件，即單向數據綁定。此時如果傳入的數據是基本數據類型，子組件中對數組做任何操作都不會影響到父組件，但如果傳入的不是基本數據類型，而是引用數據類型，則要格外注意子組件中對數據的操作可能會對父組件產生影響。

子組件通知父組件數據已處理完成 – @Output、EventEmitter

父組件傳入數據給子組件之后并不是萬事大吉了，就像父母養育孩子，供其讀書，但孩子需要把學習進度、考試成績等呈現給父母看（不管是否自愿…），父組件也需要子組件在合適的時機通知自己數據已經處理好，可以檢閱了。而此時就需要使用@Output和EventEmitter了。