Ember：将child组件的action发送给parent组件

Question

我正在尝试从 parent call/trigger child 组件的操作。我已经尝试了几种方法，但我一无所获。到目前为止，这基本上就是我所拥有的。
我试图通过将动作作为参数传递给向下传递的动作来将动作发送到 parent...
这看起来有点像意大利面条，但我的项目组织方式，这就是我的结果。

如果有人可以，请告诉我如何成功地将一个动作作为参数传递给 parent。（如果可能的话，我很想知道怎么做）
如果有人对如何调用 child 的操作也有更好的建议，请分享。提前致谢！

parent-component.hbs

{{child-component anAction=(action "anAction")}}
<div onclick={{action actionPassedFromChild}}></div>

parent-component.js

actionPassedFromChild: null,
....
actions: {
    parentAction(childAction){
       this.set('actionPassedFromChild', childAction);
    }
}

child-component.hbs

<div onclick={{action "anAction"}}

child-component.js

....
actions: {
    anAction(){
       this.parentAction(childAction);
    }
    childAction(){
       //Some operation
    }
}

在此示例中，如果我停止 'anAction' 内的代码，我确实有 'childAction'。但是当它被传递到 'parentAction' 时，它是未定义的。谁能解释为什么？

Answer 1

你好像有些错别字。例如，parentAction 不会传递给子组件。但是，如果我理解你想要实现什么——这是可行的，但我什至无法想象你为什么需要这个。

你可以玩我的例子here。 Select 在子组件中，按钮在父组件中。当您在 select 中选择某些内容时 - 子组件将两个函数之一发送到父组件。当您单击一个按钮时 - 父组件会调用该函数。

代码：

//child-component.js
import Ember from 'ember';


export default Ember.Component.extend({
  line1: "Say Hi!",
  line2: "Say Yeah!",

  changeAction(newAction) {
    switch (newAction) {
      case "1":
        this.onActionChange(this.action1);
        break;

      case "2":
        this.onActionChange(this.action2);
        break;

      default:
        this.onActionChange(undefined);
        break;
    }
  },

  action1: Ember.computed(function(){
    const that = this;
    return function() {
      alert(that.line1);
    }
  }),

  action2: Ember.computed(function(){
    const that = this;
    return function() {
      alert(that.line2);
    }
  })
});

//child-component.hbs
<select  onchange={{action changeAction value="target.value"}}>
        <option>Choose something</option>
        <option value="1">Action 1</option>
    <option value="2">Action 2</option>
</select>

//parent-component.js
import Ember from 'ember';

export default Ember.Component.extend({
  childishAction() {
    if (typeof this.childAction === 'function') {
      this.childAction();
    }
  }
});

//parent-component.hbs
{{child-component onActionChange=(action (mut childAction))}}
<div><button disabled={{unless childAction true false}} onclick={{action childishAction}}>Let's do it!</button></div>

这里发生了什么——当 ember 呈现模板时，您不能将未定义的内容传递给 action 帮助程序。因此，您需要将子组件发送的操作存储到某个变量中，并使用父组件的一些中间操作来调用它。

在我的示例中，子组件返回的函数存储在父组件的childAction 属性中，父组件childishAction调用它。

希望这对您有所帮助。但你可能试图以不正确的方式解决一些问题。

Ember：将child组件的action发送给parent组件

Ember: Send child component's action to a parent component

javascript

action

handlebars.js

ember.js