码迷,mamicode.com
首页 > 其他好文 > 详细

3-6 组件的双向绑定

时间:2020-08-06 09:21:18      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:mode   component   赋值   绑定   angular   png   set   eve   from   

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

技术图片

实战

技术图片

技术图片
按照惯例,在组件的根目录创建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 组件的双向绑定

标签:mode   component   赋值   绑定   angular   png   set   eve   from   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!