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

Question

我遇到了一个与Ember的数据不兼容的有趣问题，即操作原理。

我有一个代码编辑器组件（code-editor）坐在父组件（request-editor）内。编辑器组件上有一个方法可以在当前光标位置插入一个字符串。父组件包含一些用于将事物插入编辑器的按钮（例如当前日期）。

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

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

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

Answer 1

所有通信都应该使用动作完成。 我觉得下面是一个好方法。并且你有code_editor属性request-editor组件然后可以发送动作到code-editor组件。

请求editor.hbs

{{code-editor owner=this}} 

请求editor.js内

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

代码editor.js内

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