web前端全系列 教程
1839个小节阅读:2244.2k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
双向绑定可以实现父组件和子组件同步更新值。
Angular 的双向绑定语法是方括号和圆括号的组合 [()]
。[]
进行输入绑定(属性绑定),()
进行输出绑定(事件绑定)。
xxxxxxxxxx
<!-- 父组件模板 -->
<div>
<app-child [(size)]="sizeValue"></app-child>
我是父组件,现在的尺寸是:{{sizeValue}}
</div>
可以把上面的写法看作是下面的简写形式,注意要想使用上面的简写形式,输出属性的名称
必须得是输入属性名Change
,例如下面的输入属性名是size
,则输出属性名就是sizeChange
,这样才可以简写成上面的[(size)]
xxxxxxxxxx
<!-- 父组件模板 -->
<div>
<app-child
[size]="sizeValue" (sizeChange)='sizeValue=$event'></app-child>
我是父组件,现在的尺寸是:{{sizeValue}}
</div>
xxxxxxxxxx
//父组件类
sizeValue=10
xxxxxxxxxx
//子组件类
import { Component, EventEmitter, Input, Output, } from '@angular/core';
@Component({
selector: 'app-child',
styleUrls: ['./child.component.css'],
template: `
<button (click)="onClick()">更改尺寸</button>
我是子组件,现在的尺寸是:{{size}}
`
})
export class ChildComponent {
//获取输入属性size并赋值给类属性size
@Input() size=0
//定义输出属性sizeChange为一个事件触发器
@Output() sizeChange=new EventEmitter<number>()
constructor() { }
onClick() {
//当点击按钮时,更改实例属性size的值,并且触发输出事件,把size的值传递出去,此时,子组件的size值与父组件对应的sizeValue实现了同步变化
this.size++
this.sizeChange.emit(this.size)
}
}
实时效果反馈
1.下列描述错误的是:
A 使用([])
实现双向绑定
B 使用[()]
实现双向绑定
C 双向绑定可以让父子组件的实例属性实现同步更新
答案
1=>A