父子组件传值
requirement.png
需求：
- 父组件请求接口获取初始数据data
- 通过binding(<)单向传递给子组件
- 子组件在click事件后，发送广播，通知父组件更新data
- 子组件实时更新
坑：
子组件在初始化时，在控制器中，用新的变量代替传递的字段
// data为通过binding传递的字段
this.childData = this.data.childData
在子组件的template中使用childData
<div>{{$ctrl.childData}}</div>
此时会有两个问题：
- this.childData 在组件初始化之后，延时500ms左右才真正有值。
- 不会实时更新
现象归纳
通过binding绑定的data
- 在template中通过
$ctrl.data可以立即获取到； - 在controller中通过
this.data不能立即获取到，会有延时。
解决方案
- 建议直接在template中使用
$ctrl.data方式。 - 变化监听
如果必须在controller中使用this.data方式，可通过变化监听函数$.onChanges()实现。
网友评论