[英]Pass object to custom component through attribute
How can I pass an object to a custom component through an attribute in Aurelia? 如何通过Aurelia中的属性将对象传递给自定义组件?
My custom component class looks like this: 我的自定义组件类如下所示:
import {bindable} from 'aurelia-framework';
export class PageHeading {
@bindable title = '';
@bindable subTitle = '';
@bindable path;
constructor() {
console.log('page heading...' + this.subTitle);
}
created() {
console.log('created.. ', this.path);
}
}
And in an html file I use that component like this: 在一个html文件中,我使用这样的组件:
<page-heading title="Dashboard" sub-title="your starting point" path="${path}"></page-heading>
This works fine for strings like title
and subTitle
, but I'm not sure how to pass an object to the component. 这适用于
title
和subTitle
等字符串,但我不确定如何将对象传递给组件。 Is this possible? 这可能吗? If so, how can I do this in Aurelia?
如果是这样,我怎么能在Aurelia做到这一点?
Use the bind
command to bind a property to the element's title bindable property: 使用
bind
命令将属性绑定到元素的title bindable属性:
<page-heading title.bind="myObject" ...></page-heading>
or use the bind
command in conjunction with an object-literal binding expression: 或者将
bind
命令与object-literal绑定表达式结合使用:
<page-heading title.bind="{ foo: 'foo', bar: someProperty, baz: anotherProperty }" ...></page-heading>
Note: ES6 object literal shorthand syntax is supported- assuming you have foo
, bar
and baz
props on your VM, this would work: 注意:支持ES6对象文字速记语法 - 假设您的VM上有
foo
, bar
和baz
道具,这将起作用:
<page-heading title.bind="{ foo, bar, baz }" ...></page-heading>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.