如何在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); 
}