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

Question

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

如果有人可以，请告诉我如何成功地将一个 Action 作为参数传递给父级。 (如果可能的话，我很想知道怎么做)
如果大家对如何调用 child 的 Action 也有更好的建议，欢迎分享。提前致谢!

父组件.hbs

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

parent-component.js

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

子组件.hbs

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

子组件.js

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

在这个例子中，如果我停止“anAction”中的代码，我确实有“childAction”。但是当它被传递到“parentAction”时，它是未定义的。谁能解释一下为什么？

Answer 1

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

你可以玩我的例子here .选择在子组件中，按钮在父组件中。当您在 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 helper 一些没有定义的东西。因此，您需要将子组件发送的操作存储到某个变量中，并使用父组件的一些中间操作调用它。

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

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