Ember 组件可以在不传入模板的情况下继承父组件属性吗？答案

【问题标题】：Can an Ember component inherit parent component properties without passing in the template?Ember 组件可以在不传入模板的情况下继承父组件属性吗？
【发布时间】：2016-11-12 17:56:13
【问题描述】：

我有一些带有父子部件的组件。例如，考虑一个 Ember 组件作为选项卡菜单的解决方案，它可能看起来像这样。

{{#tab-set}}
  {{tab-single title=PageA selected=true}}
  {{tab-single title=PageB}}
  {{tab-single title=PageC}}
{{/tab-set}}

标签需要一种方法来知道应该选择哪个。 tab-set 可以有一个名为deselector 的属性。这可以传递给所有子 tab-singles。当点击 tab-single 时，它会切换 deselector 属性，所有其他子 tab-single 都会观察到该属性，确保他们都取消了选择。然后，这将允许单击的 tab-single 成为选定的选项卡。

它可能看起来像这样......

{{#tab-set}}
  {{tab-single title=PageA selected=true deselector=deselector}}
  {{tab-single title=PageB deselector=deselector}}
  {{tab-single title=PageC deselector=deselector}}
{{/tab-set}}

对于我创建的每个选项卡，我都需要传入 取消选择器。有没有办法可以将 tab-single 设置为始终查找其父 tab-set 中的 deselector 属性？

也就是说，有没有一种方法可以让子组件始终从其父组件中查找属性，而不必在模板中传递？

塔

【问题讨论】：

标签： ember.js

【解决方案1】：

有一种方法可以使用上下文组件来做到这一点。您需要做的是生成已绑定取消选择器的tab-single 组件，而不是直接使用tab-single。

I've made a working Twiddle 以便您查看。

首先，我们生成带有deselector 操作绑定的组件。我正在使用哈希助手来内联构造一个对象。这使得导出的变量更有条理。

 // app/templates/components/tab-set.hbs
 {{yield (hash tab=(component 'tab-single' deselector=deselector))}}

要能够像这样绑定deselector 动作，意味着我们必须将它传递给tab-set。由于我们使用的是块形式和yield，我们将拥有所谓的块参数。想想{{each array as |item|}} 语法。项目可以是您认为更合适的任何名称：

 {{#tab-set deselector=(action 'deselector') as |opts|}}
   {{opts.tab page="1"}}
   {{opts.tab page="2"}}
   {{opts.tab page="3"}}
 {{/tab-set}}

希望这能充分回答您的问题:)

【讨论】：