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

Question

我遇到了一个有趣的问题，不符合安博的数据下来，行动向上的原则。

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

我认为我将按钮与编辑器分开是正确的，因为编辑器在其他地方使用时没有这些按钮。

显然，在这个用例中使用绑定变量是没有意义的，因为它不是真正的数据，而是想执行一个操作。也就是说，{{code-editor insertText=insertText}}是没有道理的。

如何能够有效地从父组件调用codeEditorChildComponent.insert()？我很感激它可能涉及到将它们耦合在一起，但它们必须耦合起来才能工作。父组件已经由子组件组成。

Answer 1

所有的沟通都应该用行动来完成。我觉得下面是个好办法。并且在code_editor组件中有request-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);
}