#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.jsimport 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.jsimport 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.jsimport 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;

本节完