Ember 将在父组件内部创建的属性传递给子组件答案

【问题标题】：Ember Pass property created inside parent component to child componentsEmber 将在父组件内部创建的属性传递给子组件
【发布时间】：2017-04-17 09:08:54
【问题描述】：

在我的 Ember 应用程序中，我在父组件的 init() 方法中创建了一个属性。我想把它传递给孩子们。

// app/component/parent.js
import Ember from 'ember';
import ParentProperty from 'somewhere';

export default Ember.Component.extend({
    init() {
        this._super(...arguments);
        let model = this.get('model');
        let moreData = this.get('moreData');
        this.parentProperty = new ParentProperty(model, moreData);
    }

    click(e) {
        this.get('moreData').doSomthing();
    }
});

// app/component/application.hbs
{{#parent model=model moreData=moreData}}
    // Here, I want to pass the `parentProperty` created 
    // in the init of the parent component.
    {{child parentProperty=parent.parentProperty}}
{{/parent}}

我知道我可以使用 {{with}} 帮助器来创建 ParentProperty，包装父子属性，并将其传递给它们，但这不是我想要做的。这可能吗？

【问题讨论】：

这个模板是你的路由模板，不是你的父组件模板，对吧？而且您无法从外部访问组件的属性。但是，您可以将其传递给 yield 助手以公开它。
对，就是路由模板。我已经编辑了这个问题。我如何从 yield helper 中公开它？

标签： ember.js ember-cli

【解决方案1】：

正如@Lux 所建议的，我可以使用 yield 助手来实现这一点。

// app/component/parent.js
import Ember from 'ember';
import ParentProperty from 'somewhere';

export default Ember.Component.extend({
    init() {
        this._super(...arguments);
        let model = this.get('model');
        let moreData = this.get('moreData');
        this.parentProperty = new ParentProperty(model, moreData);
    }

    click(e) {
        this.get('moreData').doSomthing();
    }
});

// app/component/parent.hbs
{{yield parentProperty}}

// app/component/application.hbs
{{#parent model=model moreData=moreData as |parentProperty|}}
    {{child parentProperty=parentProperty}}
{{/parent}}

【讨论】：