Ember组件可以继承父组件属性而不传入模板吗？

Question

我有一些组件包含父母和子女部分.例如,将Ember组件视为选项卡菜单的解决方案,它可能看起来像这样.

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

选项卡需要一种方法来知道应该选择哪个.该选项卡集可以有一个叫做财产deselector.这可以传递给所有子选项卡.当标签单被点击时,它会切换deselector属性,它会被所有其他的孩子进行观察标签单,以确保它们都全部取消.然后,这将允许单击的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以始终在其父选项卡集中查找deselector属性？

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

钽

Answer 1

有一种方法可以通过上下文组件来实现.您需要做的是tab-single使用已经绑定的deselector 生成组件,而不是tab-single直接使用.

我做了一个工作旋转,所以你可以检查出来.

首先,我们生成具有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}}

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