在 Vue 中
<Person v-bind='{name: "Tom", color: "Blue"}'></Person>
在反应中
<Person {...{name: "Tom", color: "Blue"}}></Person>
在角度?
更新
Person 组件有 2 个输入属性。如何快速绑定一个对象到这个组件?
数据是
const it = {name: "Tom", color: "Blue"}
@Component({
templateUrl: './person.component.html'
})
export class PersonComponent {
@Input() name: string;
@Input() color: string;
}
<Person ???="it" />
你的 Person 组件
name: string;
color: string;
@Input('personData') set _person({ name, color }: { name: string; color: string }) {
this.name = name;
this.color = color;
}
你的主要组件
<app-person [personData]="{name: 'Tom', color: 'Blue'}"></app-person>
注意:(您可以选择使用
Input('your input') whatever(..)
或@Input()yourInput(..){}
可以使用接口数据模型来处理这个
人物细节成分
@Component({
selector: 'person-detail',
template: `
<div>Name : {{person.name}} </div>
<div>Color : {{person.color}}</div>
`,
})
export class PersonComponent {
@Input() person: Person;
}
人机界面
export interface Person {
name: string;
color: string;
}
你可以像这样调用组件
<person-detail
[person]="{ name: 'Testing User', color: 'black' }"
></person-detail>