ember*3.5 将属性传递给组件

组件和它们周围的环境是隔离的，所以组件需要的任何数据都需要传递进去。

例如，想象你有一个blog-post组件，用来显示博客文章：

{{article class='blog-post'}}
    <h1>{{title}}</h1>
    <p>{{body}}</p>
{{/article}}

现在想象我们有下面的模板和路由：

//in route index.js
export default Route.extend({
    model() {
        return this.store.findAll('post');
    }
})

如果我们试图使用这种组件：

{{#each model as |post|}}
    {{blog-post}}
{{/each}}

下面的HTML将会被渲染：

<article class='blog-post'>
    <h1></h1>
    <p></p>
</article>

为了使组件的属性可用，你必须像这样将属性传进进去：

{{#each model as |post|}}
    {{blog-post title=post.title body=post.body}}
{{/each}}

重要的是要注意这些属性保持同步（技术上成为绑定），也就是说，如果组件中componentProperty的值改变，outerProperty将会反映更新变化。反之亦然。

除了使属性可用，还可以为组件提供action。它允许数据流回到它的父元素。你可以这样传递action:

{{button-with-confirmation text='click here to use' onConfirm=(action "unsubscribe")}}

需要注意，action只能从controller或其他component传递。他们不能从route传递过来。想了解更多关于传递action的细节，请参阅 passing an action to the component。

定位参数

除了通过名字传递参数，你还可以通过位置传递他们。换句话说，你可以像这样调用上面的组件示例：

{{#each model as |post|}}
    {{blog-post post.title post.body}}
{{/each}}

要将组件设置为用这种方式接收参数，你需要在组件类中设置[positionalParams`](https://www.emberjs.com/api/ember/release/classes/Component/properties/positionalParams?anchor=positionalParams)属性。

//in component.js
export dafault Component.extend({}).reopenClass({
    positionalParams: ['title', 'body'],
})

然后你就可以像使用{{blog-post title=post.title body=post.body}}一样使用组件中的属性。

注意positionalParams属性通过reopenClass作为静态变量添加到类中。位置参数始终在组件类上声明，并且在程序运行时无法更改。

另外，你可以通过将positionalParams设置为字符串来接收任意数量的参数，例如，positionalParams: 'params'。它允许你将这些参数作为数组访问，像下面这样：

import {computed} from '@ember/object';

export dafult Component.extend({
    title: computed('params.[ ]', function() {
        return this.params[0];
    }),
    body: computed('params.[]', function() {
        return this.params[1];
    })
}).reopenClass({
        positonalParams: 'params'
    })