Question

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

 User Load (44.9ms)  SELECT  "users".* FROM "users" ORDER BY "users"."id" ASC LIMIT $1  [["LIMIT", 1]]

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

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

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

对于我制作的每个标签，我都需要传入取消选择器。有没有办法可以将标签单设置为始终查找其父标签集中的取消选择器属性？

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

TA

Answer 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}}

希望这能充分回答你的问题：）

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

1 个答案: