#3 给组件传递属性

英文原版：https://guides.emberjs.com/v2.14.0/components/passing-properties-to-a-component/

组件是与它所在的环境完全隔离的，所以任何组件需要的东西都必须要传递给它

比如，假设你现在有个blog-post组件用来展示博客：

app/templates/components/blog-post.hbs

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

继续假设，我们有如下模版和路由：

app/routes/index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('post');
  }
});

app/templates/index.hbs

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

那么渲染结果将会如下：

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

为了使得模版中的信息得以被组件使用，我们必须要把数据作为组件的属性传递给它：

app/templates/index.hbs

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

必须要注意的是，这些属性保持着同步状态。事实上是，如果组件中的属性的值发生了变化，那么这个变化会反映到组件外部与之相关连的变量上。在这个例子中，如果title属性的值改变了，那么post.title的值也会改变；反之亦然。

位置参数

除了可以根据参数名称来给组件传递参数之外，你可以根据参数的位置来处理参数。换句话说，上面的例子，可以改造成下面这样：

app/templates/index.hbs

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

为了使得组件可以接收位置参数，你需要在组件中设置positionalParams 属性：

app/components/blog-post.js

import Ember from 'ember';

const BlogPostComponent = Ember.Component.extend({});

BlogPostComponent.reopenClass({
  positionalParams: ['title', 'body']
});

export default BlogPostComponent;

然后，你就可以使用title和body这两个属性了。

注意：positionalParams属性是通过reopenClass设置到组件类中的静态变量。所以，它在程序运行的时候是不能改变的。

或者，你可以通过数组的形式来接收任意数量的参数，这时候你需要把positionalParams的值设置为字符串“params“，通过params来获得参数列表中每一个参数：

app/components/blog-post.js

import Ember from 'ember';

const BlogPostComponent = Ember.Component.extend({
  title: Ember.computed('params.[]', function(){
    return this.get('params')[0];
  }),
  body: Ember.computed('params.[]', function(){
    return this.get('params')[1];
  })
});

BlogPostComponent.reopenClass({
  positionalParams: 'params'
});

export default BlogPostComponent;

本节完