首页 > 其他 > 详细

3-6 组件的双向绑定

时间:2020-08-06 01:23:15      阅读:103      评论:0      收藏:0      [点我收藏+]

双向绑定就是属性绑定+事件绑定。
技术分享图片

技术分享图片

实战

技术分享图片

技术分享图片
按照惯例,在组件的根目录创建index.ts 导出这个组件。
export * from .....
技术分享图片

技术分享图片

技术分享图片
这样导入的就是从components/index下面导入进来的。
技术分享图片
根组件的页面,使用这个组件
技术分享图片
组件就显示出来了
技术分享图片

技术分享图片


技术分享图片
value我们进行绑定
技术分享图片
ts内定义username的变量
技术分享图片

技术分享图片

技术分享图片

技术分享图片
页面上,鼠标放上去是有个输入框的。
技术分享图片
加上css
技术分享图片
技术分享图片

技术分享图片

技术分享图片
右边的值,随着输入框而变化的。
技术分享图片

使用ngModel


技术分享图片

技术分享图片

ngModel改造代码

技术分享图片

技术分享图片
相当于进行了属性绑定,又进行了事件绑定
技术分享图片

技术分享图片

也是同样的效果
技术分享图片

自定义实现双向绑定


技术分享图片


技术分享图片

get就表示取到这个属性
技术分享图片
同样再生成set方法
技术分享图片
我们把属性读和写分成了两个方法。加上@Input表示输入型的属性。
技术分享图片

技术分享图片
读的时候,相当于调用了get这样一个方法。
技术分享图片
虽然我们写成的是这种下划线的形式,但是我们对外暴露的是username
技术分享图片
鼠标放在username上
技术分享图片
这里是把值赋值给input
技术分享图片
就相当于写入这个属性。写入的属性就是调用set方法。
技术分享图片

输出属性

做一个输出属性做实验。注意要从angular/core里面导入。
技术分享图片


技术分享图片

技术分享图片
写入之后,同时把这个事件之后,同时把这个事件发射出去。emit出去。
技术分享图片
外部调用的时候,也就是父组件调用这个组件的时候。
技术分享图片
跟组件内ts内,定义username
技术分享图片

注意这里后面有空格,删掉
技术分享图片

技术分享图片

技术分享图片

我们相当于用了语法糖实现了双向绑定
技术分享图片
相当于是这样的一个变种。
技术分享图片
event就是相当于子组件内发射的事件
技术分享图片

在完成属性绑定的同时 又进行了事件的绑定。
技术分享图片
那么这个属性在绑定的时候,实际上进行了两个操作,一个属性绑定,一个是事件绑定。
技术分享图片

 

结束

 

3-6 组件的双向绑定

原文:https://www.cnblogs.com/wangjunwei/p/13443698.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!