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

Question

我遇到了一个有趣的问题，不符合Ember的数据，行动原则。

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

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

对于此用例使用绑定变量显然没有意义，因为它不是真正的数据，它想要执行操作。即request-editor毫无意义。

如何从父组件中有效地调用{{code-editor insertText=insertText}}？我很欣赏它可能会将它们耦合在一起，但它们必须耦合才能使它工作。父组件已由子组件组成。

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);
}