父子组件传值
需求:
- 父组件请求接口获取初始数据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()实现。