Ember如何從父組件訪問子組件

Question

這個概念相當簡單。

假設我有一個子組件，它有自己獨立的 js 和 hbs。 子組件.hbs =>

<Button options = {{listOptions}} selected={{selectedOption}}
> Submit <Button

子組件.js

listOptions =[{id: 124, name: 'Mywork'}
selected => performing an action after getting the value from hbs selection.

現在我將它導入到另一個組件Main-component.hbs ，就像這樣

<ChildComponent />

這是使用選項和所有選項按預期呈現的，但是基於selectedOption我想在我的主要組件中做一些事情。 處理主組件中的操作對我來說不是一個選項，因為它不是我被告知要做的。 是否可以從主組件訪問selectedOption ？ 請幫忙。

請注意，我想在 Octane 版本中實現這一點。

Answer 1

這樣做的唯一方法是專門將父項的引用傳遞給子項，並讓子項在父項上調用一些 function（因為在渲染中，默認情況下數據僅向下流動（“數據向下，動作/功能向上“））

例子：

class Parent {
  foo(child) {
    // do something with the child
  }
}
<Child @foo={{this.foo}} />

// ------------------

class Child { }
{{ (@foo this) }}

請注意，這是一種“效果”，效果通常是代碼味（應盡可能使用派生數據）