如何在EmberJS中从父组件调用子组件的方法

Question

我遇到了一个有趣的问题，它与Ember的数据向下、动作向上原则不符。

我有一个代码编辑器组件（code-editor），位于父组件（request-editor）中。编辑器组件有一个方法，在当前光标位置插入字符串。父组件包括一些按钮，用于向编辑器中插入内容（例如当前日期）。

我认为将按钮与编辑器分开是正确的，因为编辑器在其他地方也可以使用，而不需要这些按钮。

显然，对于这种情况，使用绑定变量是没有意义的，因为它不是真正的数据，而是想执行一个动作。即{{code-editor insertText=insertText}}是没有意义的。

如何有效地从父组件中调用codeEditorChildComponent.insert()？我知道这可能会涉及耦合它们在一起，但它们必须耦合在一起才能正常工作。父组件已经由子组件组成。

- howard10

Answer 1

所有通信都应该使用动作。

我认为以下是一个不错的方式。如果您在request-editor组件中有code_editor属性，那么就可以向code-editor组件发送动作。

request-editor.hbs

{{code-editor owner=this}}

request-editor.js

actions:{
  setChild(child){
    this.set('code_editor', child);
  }
}

code-editor.js

didInsertElement(){
  this._super(...arguments);
  this.get('owner').send('setChild', this);
}

- Ebrahim Pasbani

---

谢谢！我稍微调整了一下，因为我意识到当code-editor准备好时，我已经有一个动作了，但是你的答案让我意识到我可以通过该动作传递this，然后在父组件中存储一个句柄以供将来使用。 - howard10