3-6 组件的双向绑定

Posted wangjunwei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了3-6 组件的双向绑定相关的知识,希望对你有一定的参考价值。

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

技术图片

实战

技术图片

技术图片
按照惯例,在组件的根目录创建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 组件的双向绑定的主要内容,如果未能解决你的问题,请参考以下文章

Angular 手动实现ngModal数据双向绑定

前端面试被问到,vue实现数据双向绑定,原理是什么

antd表单组件的双向绑定

Vue的双向绑定以及组件的自定义事件

Angular自定义组件实现数据双向数据绑定

Vue3的双向绑定是如何实现的