如何在Ember.js中从子组件调用父组件方法？已知Action Down Data Up策略

嘿，关于Ember.js里子组件调用父组件方法的问题，我给你梳理得明明白白的！

首先得牢牢记住Ember核心的**Action Down & Data Up（EDU）**策略：父组件把action传递给子组件（Action Down），子组件通过调用这些action把数据或事件通知给父组件（Data Up），这是官方推荐的标准交互方式，能保证组件解耦、数据流清晰。

通用实现步骤如下：

1. 父组件定义action并封装逻辑
   你可以在父组件里先定义action，甚至在action里调用父组件自己的普通方法：

   // app/components/parent-component.js
   import Component from '@glimmer/component';
   import { action } from '@ember/object';
   
   export default class ParentComponent extends Component {
     @action
     handleChildTrigger(data) {
       console.log('子组件触发了父组件的action，收到数据：', data);
       // 在这里调用父组件的普通方法
       this.processData(data);
     }
   
     // 父组件的普通方法
     processData(data) {
       console.log('父组件普通方法处理数据：', data);
       // 这里写你的业务逻辑
     }
   }
   

2. 父组件模板传递action给子组件
   在父组件的hbs模板里，把刚才定义的action作为参数传给子组件：

   {{! app/templates/components/parent-component.hbs }}
   <ChildComponent @onChildAction={{this.handleChildTrigger}} />
   

3. 子组件调用传递过来的action
   在子组件里，通过this.args拿到父组件传过来的action，在需要的时机（比如按钮点击）调用它，还可以传递数据：

   // app/components/child-component.js
   import Component from '@glimmer/component';
   import { action } from '@ember/object';
   
   export default class ChildComponent extends Component {
     @action
     triggerParentMethod() {
       // 调用父组件传递的action，顺便传数据
       this.args.onChildAction('来自子组件的消息');
     }
   }
   

   子组件模板里可以加个触发按钮：

   {{! app/templates/components/child-component.hbs }}
   <button {{on "click" this.triggerParentMethod}}>触发父组件方法</button>
   

直接说结论：技术上能做到，但绝对不推荐，严重违背Ember的设计原则。

为什么不推荐？ #

EDU策略的核心是让组件之间保持低耦合，父组件的内部逻辑（比如普通方法）应该是封装起来的，子组件只需要关心“触发事件”，不需要知道父组件内部怎么处理。如果子组件直接调用父组件的普通方法，会让两个组件强绑定：

• 父组件的方法改名、参数变化，子组件必须跟着改，维护成本暴增
• 组件的复用性会大打折扣，子组件只能依赖特定的父组件结构
• 调试起来会非常麻烦，很难追踪方法调用的链路

如果非要这么做（再次强调：不建议！） #

你可以把父组件的实例直接传递给子组件，然后在子组件里调用实例的普通方法：

1. 父组件模板传递自身实例：

   {{! app/templates/components/parent-component.hbs }}
   <ChildComponent @parent={{this}} />
   

2. 子组件调用父组件普通方法：

   // app/components/child-component.js
   import Component from '@glimmer/component';
   import { action } from '@ember/object';
   
   export default class ChildComponent extends Component {
     @action
     callParentRegularMethod() {
       // 直接调用父组件的普通方法
       this.args.parent.processData('直接调用父组件普通方法');
     }
   }
   

但再次提醒：这种做法会破坏组件的封装性和独立性，Ember官方完全不认可这种方式，遇到需求时，优先用Action Down的方式来实现。

内容的提问来源于stack exchange，提问作者Bhavya Bansal