嵌入模板-在函数调用中将参数从子级传递到父级

mi7gmzs6 于 2022-09-28 发布在其他

关注(0)|答案(2)|浏览(135)

我有一个在循环中创建的Ember组件。我传递一个带参数的函数。子函数需要传递另一个参数才能工作。我如何做到这一点？
前任：

Parent:
<div>
  {{#each items as |item index|}}
    <Child 
      @onButton1Click={{fn this.doStuff index}} // need index to do stuff
    />
  {{/each}}
</div>

Child:
<div>
  <ColorSelector @onColorChange={{this.changeColor}}/>
  <Button @onClick={{this.onButton1ClickAction}} />
</div>

b1a1a

// Child.js

@tracked
color = 'blue';

@action 
changeColor(passedColor) {
  this.color = passedColor; // some hex value
}

@action
onButton1ClickAction() {
  this.args.onButton1Click?.(this.color);
  // how do I pass back color
}

问题是，如何使用子级的传递颜色并维护父级的索引？目前只看到索引。

ember.js

来源：https://stackoverflow.com/questions/73211262/ember-template-pass-parameters-from-child-to-parent-in-function-call

2条答案

按热度按时间

qfe3c7zg1#

看起来像

<Child 
      onButton1Click={{fn this.doStuff index}} // need index to do stuff
    />

应该是

<Child 
      @onButton1Click={{fn this.doStuff index}} // need index to do stuff
    />

和

<ColorSelector onColorChange={{this.changeColor}}/>
  <Button onClick={{this.onButton1ClickAction}} />

应该是

<ColorSelector @onColorChange={{this.changeColor}}/>
  <Button @onClick={{this.onButton1ClickAction}} />

（注意@）
如果没有e1d1e，onButton1Click将被解释为html属性，该属性将应用于...attributes（如果存在）中的Child元素，否则onButton1Click不会做任何事情。
相关文档：https://guides.emberjs.com/release/components/component-arguments-and-html-attributes/

赞(0）回复(0）举报 2022-09-28

yhqotfr82#

我认为您必须从子级执行父函数

//child.js
@tracked
color = 'blue';

@action 
changeColor(passedColor) {
  this.color = passedColor; // some hex value
}

@action
onButton1ClickAction() {
  const click = this.args.onButton1Click ?? null;
  if (click) {
     click(this.color)
}

赞(0）回复(0）举报 2022-09-28

我来回答

嵌入模板-在函数调用中将参数从子级传递到父级

2条答案

相关问题

热门标签

最新问答