#3 给组件传递属性
2017-07-08 23:32
351 查看
英文原版:https://guides.emberjs.com/v2.14.0/components/passing-properties-to-a-component/
组件是与它所在的环境完全隔离的,所以任何组件需要的东西都必须要传递给它
比如,假设你现在有个blog-post组件用来展示博客:
继续假设,我们有如下模版和路由:
那么渲染结果将会如下:
为了使得模版中的信息得以被组件使用,我们必须要把数据作为组件的属性传递给它:
必须要注意的是,这些属性保持着同步状态。事实上是,如果组件中的属性的值发生了变化,那么这个变化会反映到组件外部与之相关连的变量上。在这个例子中,如果title属性的值改变了,那么post.title的值也会改变;反之亦然。
为了使得组件可以接收位置参数,你需要在组件中设置positionalParams 属性:
然后,你就可以使用title和body这两个属性了。
注意:positionalParams属性是通过reopenClass设置到组件类中的静态变量。所以,它在程序运行的时候是不能改变的。
或者,你可以通过数组的形式来接收任意数量的参数,这时候你需要把positionalParams的值设置为字符串“params“,通过params来获得参数列表中每一个参数:
本节完
组件是与它所在的环境完全隔离的,所以任何组件需要的东西都必须要传递给它
比如,假设你现在有个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;
本节完
相关文章推荐
- vue 父子组件属性传递
- rn笔记:如何给自定义组件传递参属性
- vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子,儿子更改数据后,重新发送给父亲,父亲数据更改后,属性会重新发送个儿子,儿子刷新新数据
- React组件实现越级传递属性
- Intent之使用Extra属性在组件之间传递数据
- 使用事件属性在主界面与用户组件之间传递事件。
- vue使用组件时,需要给传递的props属性默认值细节
- 进程外组件 数据传递 指针传递
- React学习之让组件和属性齐飞(三)
- Android自定义组件添加组件的属性
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- 【angular】组件:@Input() @Output() 输入属性和输出属性以及中间人模式的使用 (一)
- 转:ECharts图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转
- 利用自定义属性来传递信息
- [Apache-Fulcrum-Intake]表示层和业务层的数据传递组件
- vue父组件通过props如何向子组件传递方法详解
- 常用组件属性
- Android的Activity组件启动,切换和值传递学习
- java后台传递json数据到前端并渲染react组件(react+struts2)
- vue组件间的传递