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

父組件和子組件

接觸過(guò)面向?qū)ο缶幊痰拈_(kāi)發(fā)者肯定不會(huì)對(duì)父子關(guān)系陌生，在Angular 2中子組件存在于父組件“體內(nèi)”，并且父子組件可以通過(guò)一些渠道進(jìn)行通訊。

父組件向子組件傳入數(shù)據(jù) – @Input

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

// child-component.ts
import { OnInit, Component, Input } from '@angular/core';

@Component({
  selector: 'child-component',
  ...
})
export class ChildComponent implements OnInit {
  @Input
  count: number = 0;

  ngOnInit() {
    console.log(this.count);  // 父組件內(nèi)傳入的值或者我們自己設(shè)置的初始值0
  }

  increaseNumber() {
    this.count ++;
  }

  descreaseNumber() {
    this.count --;
  }
}

可以看到，我們使用裝飾器@Input修飾了count屬性，這就意味著child-component被使用時(shí)期望收到一個(gè)名為count的屬性，當(dāng)然不屬于自己掌控的范圍內(nèi)要小心行事，別人使用我們的組件時(shí)什么情況都可能出現(xiàn)，所以我們?yōu)閏ount設(shè)置了一個(gè)初始值，當(dāng)父組件沒(méi)有給我們的count屬性傳值時(shí)，我們就取此初始值。

// father-component.ts
import { 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時(shí)，為count屬性賦予初始值initialCount，即5，也就是說(shuō)此時(shí)ChildComponent的ngOnInit方法中會(huì)打印出5。注意[count]語(yǔ)法標(biāo)識(shí)了數(shù)據(jù)流向：父組件流入子組件，即單向數(shù)據(jù)綁定。此時(shí)如果傳入的數(shù)據(jù)是基本數(shù)據(jù)類型，子組件中對(duì)數(shù)組做任何操作都不會(huì)影響到父組件，但如果傳入的不是基本數(shù)據(jù)類型，而是引用數(shù)據(jù)類型，則要格外注意子組件中對(duì)數(shù)據(jù)的操作可能會(huì)對(duì)父組件產(chǎn)生影響。

子組件通知父組件數(shù)據(jù)已處理完成 – @Output、EventEmitter

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

// father-component.ts
import { Component } from '@angular/core';
import { ChildComponent } from '../child-component/child-component';

@Component({
  template: `
    <child-component [count]='initialCount' (change)="countChange($event)"></child-component>
  `,
  ...
})
export class FatherComponent {
  initialCount: number = 5;

  countChange($event) {

  }
}

看看我們?cè)诟附M件中加入了什么東東：

1.(change)，看到這樣的語(yǔ)法第一時(shí)間就知道這是事件綁定，也就是說(shuō)我們?cè)诟附M件中監(jiān)聽(tīng)子組件的某些變化，并能夠在其變化時(shí)作出相關(guān)操作；

2.增加了countChange方法作為change事件的處理函數(shù)。

但是稍等，當(dāng)我們?yōu)閕nput標(biāo)簽指定type、placeholder等屬性時(shí)，我們知道它們都已經(jīng)被“實(shí)現(xiàn)了”，所謂“實(shí)現(xiàn)”，即這些屬性在input標(biāo)簽上是有意義的。但是目前這里我們?yōu)閏hild-component指定了名為change的事件是沒(méi)意義的，因?yàn)槠洳⑽础皩?shí)現(xiàn)”change事件，于是下一步我們就需要使用@Output和EventEmitter將其變得有意義：

// child-component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child-component',
  ...
})
export class ChildComponent {
  @Input
  count: number = 0;

  @Output
  change = new EventEmitter();

  increaseNumber() {
    this.count ++;
    this.change.emit(this.count);
  }

  descreaseNumber() {
    this.count --;
    this.change.emit(this.count);
  }
}

讓我們?cè)賮?lái)看看在子組件中增加了什么東東：

1.使用裝飾器@Output修飾了change屬性，并為其賦了初值為EventEmitter的實(shí)例；

2.在increaseNumber和descreaseNumber方法修改了count屬性后，調(diào)用了change屬性的emit方法通知父組件。

此時(shí)，我們?cè)贑hildComponent中實(shí)現(xiàn)了change，于是父組件中為child-component綁定change事件也就有意義了：當(dāng)子組件通知父組件時(shí)，父組件可以獲取到通知中攜帶的數(shù)據(jù)并進(jìn)行下一步操作：

// father-component.ts
...
countChange($event) {
  this.initialCount = $event;
}
...

總結(jié)

不知道你有沒(méi)有發(fā)現(xiàn)，其實(shí)上面我們模擬了“雙向數(shù)據(jù)綁定”：父組件將數(shù)據(jù)傳入子組件，子組件改變數(shù)據(jù)時(shí)通知父組件進(jìn)行“同步更新”。但是要注意其實(shí)數(shù)據(jù)流向是單向的，即數(shù)據(jù)是父組件單向流入子組件，父組件數(shù)據(jù)的更新是通過(guò)子組件的事件通知以后才被更新。也就是說(shuō)其實(shí)在Angular 2中：雙向數(shù)據(jù)綁定 = 單向數(shù)據(jù)綁定 + 事件，以我們最熟悉的ngModel為例：

<input type='text' name='userName' [(ngModel)]="userName">

和下面的寫法是等價(jià)的：

同樣的，如果將我們的child-component組件寫作雙向數(shù)據(jù)綁定的形式即為：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論