父子組件傳值
requirement.png
需求：
- 父組件請(qǐng)求接口獲取初始數(shù)據(jù)data
- 通過(guò)binding(<)單向傳遞給子組件
- 子組件在click事件后，發(fā)送廣播，通知父組件更新data
- 子組件實(shí)時(shí)更新
坑：
子組件在初始化時(shí)，在控制器中，用新的變量代替?zhèn)鬟f的字段
// data為通過(guò)binding傳遞的字段
this.childData = this.data.childData
在子組件的template中使用childData
<div>{{$ctrl.childData}}</div>
此時(shí)會(huì)有兩個(gè)問(wèn)題：
- this.childData 在組件初始化之后，延時(shí)500ms左右才真正有值。
- 不會(huì)實(shí)時(shí)更新
現(xiàn)象歸納
通過(guò)binding綁定的data
- 在template中通過(guò)
$ctrl.data可以立即獲取到； - 在controller中通過(guò)
this.data不能立即獲取到，會(huì)有延時(shí)。
解決方案
- 建議直接在template中使用
$ctrl.data方式。 - 變化監(jiān)聽(tīng)
如果必須在controller中使用this.data方式，可通過(guò)變化監(jiān)聽(tīng)函數(shù)$.onChanges()實(shí)現(xiàn)。
