Ember中子组件间如何触发Action？this.sendAction失效问题

在Ember里，同级组件（比如你说的B和C）之间没法直接用this.sendAction通信——因为sendAction的机制是向上传递动作到父组件，而B和C是平级关系，互相没有直接的父子关联，所以你的尝试才会失效。下面给你两种最常用的解决方案，分别对应不同场景：

方法一：通过父组件A作为中间层（推荐，符合Ember数据流规范） #

这是Ember官方推崇的单向数据流模式：动作从子组件B向上传到父组件A，再由A通知子组件C执行对应逻辑。

实现步骤： #

1. 父组件A在模板中给B传递一个自定义动作，同时给C绑定一个状态属性或者直接引用C的实例
2. 组件B触发动作时，通过sendAction把动作传递给父组件A
3. 父组件A接收到动作后，要么更新传递给C的状态属性，要么直接调用C的实例方法

代码示例： #

父组件A的模板（component-a.hbs）

{{! 给B传递动作，给C绑定状态属性 }}
{{component-b on-trigger-from-b=(action "handleBTrigger")}}
{{component-c should-execute=shouldRunCLogic}}

父组件A的JS（component-a.js）

import Component from '@ember/component';
import { set } from '@ember/object';

export default Component.extend({
  shouldRunCLogic: false,

  actions: {
    handleBTrigger() {
      // 方式1：更新状态属性，触发C的监听逻辑
      set(this, 'shouldRunCLogic', true);
      // 可选：重置状态，方便下次触发
      setTimeout(() => set(this, 'shouldRunCLogic', false), 100);

      // 方式2：如果给C加了ref，也可以直接调用C的方法
      // this.get('componentCInstance').doSomething();
    }
  }
});

子组件B的JS（component-b.js）

import Component from '@ember/component';

export default Component.extend({
  actions: {
    sendToC() {
      // 把动作向上传递给父组件A
      this.sendAction('on-trigger-from-b');
      // 如果你用的是Ember Octane及以上版本，也可以用：
      // this.args.onTriggerFromB();
    }
  }
});

子组件C的JS（component-c.js）

import Component from '@ember/component';
import { observer } from '@ember/object';

export default Component.extend({
  // 监听父组件传递的状态变化
  watchForTrigger: observer('should-execute', function() {
    if (this.get('should-execute')) {
      this.doSomething();
    }
  }),

  doSomething() {
    // 这里写C需要执行的逻辑
    console.log('收到来自B的触发信号！');
  }
});

方法二：用Ember服务做事件总线（适合复杂跨组件场景） #

如果你的组件层级很深、或者需要跨多个无关组件通信，可以用Ember的服务来搭建一个全局事件总线，让B和C通过服务传递事件。

实现步骤： #

1. 创建一个带事件能力的服务
2. 在组件B和C中注入这个服务
3. B通过服务触发事件，C通过服务监听事件

代码示例： #

事件总线服务（event-bus.js）

import Service from '@ember/service';
import { Evented } from '@ember/object';

export default Service.extend(Evented, {
  // 服务自带Ember的Evented能力，可直接触发/监听事件
});

子组件B的JS（component-b.js）

import Component from '@ember/component';
import { inject as service } from '@ember/service';

export default Component.extend({
  eventBus: service(),

  actions: {
    sendToC() {
      // 通过服务触发自定义事件，还可以传递参数
      this.get('eventBus').trigger('b-triggered', '来自B的参数');
    }
  }
});

子组件C的JS（component-c.js）

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { on } from '@ember/object/evented';

export default Component.extend({
  eventBus: service(),

  // 组件初始化时监听事件
  setupListener: on('init', function() {
    this.get('eventBus').on('b-triggered', this, 'handleBTrigger');
  }),

  // 组件销毁时移除监听，避免内存泄漏
  teardownListener: on('willDestroy', function() {
    this.get('eventBus').off('b-triggered', this, 'handleBTrigger');
  }),

  handleBTrigger(data) {
    // 执行C的逻辑，接收B传递的参数
    console.log('收到B的触发！参数：', data);
  }
});

选择建议 #

• 如果只是简单的同级组件通信，优先用方法一，符合Ember的单向数据流规范，代码更清晰易维护；
• 如果是复杂的跨组件、深层级通信，再考虑方法二，但一定要记得在组件销毁时移除事件监听，避免内存泄漏。

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