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



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

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

选项卡需要一种方法来知道应该选择哪个选项卡。选项卡集可以有一个名为deselector的属性。这可以传递给所有的子选项卡单。当单击选项卡-single时,它将切换取消选择器属性,这将被所有其他子选项卡-single观察,确保它们都取消选择。这将允许被单击的选项卡-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}}

对于我创建的每个选项卡,我都需要传入取消选择器。是否有一种方法,我可以设置选项卡-single总是在其父选项卡-set中查找取消选择符属性?

也就是说,是否有一种方法可以让子组件总是从父组件中寻找属性,而不必在模板中传递它?

Ta

有一种方法可以使用上下文组件。您需要做的是生成已经绑定了取消选择符的tab-single组件,而不是直接使用tab-single

我已经做了一个工作的Twiddle,所以你可以看看。

首先,我们得到具有deselector作用界的分量。我使用散列帮助器来内联构造一个对象。这使得导出的变量更加结构化。

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

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

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

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

最新更新