Ember 中组件之间的通信

Question

我有一个包含两个组件的模板，一个是文件上传组件，一个是显示上传进度的进度条。

{{file-upload}}
{{ember-progress-bar progress=progress}}

我正在使用 ember-uploader。我正在尝试像这样设置进度条的进度：

uploader.on('progress', e => {
    // send progress to other component
});

我了解到您应该使用动作在组件之间进行通信，但我只能在上传组件的 filesDidChange 函数中访问该进度值，所以我认为我无法在动作中发送它.将此进度值发送到进度条组件的最佳方式是什么？

Answer 1

这是我使用上下文组件为没有父子关系的组件启用组件间通信的地方（一个不在其模板中呈现另一个）。

请看下面twiddle我已经为你准备好了说明我的意思。我创建了模拟 ember-progress-bar 和 file-upload 组件。当然，我没有使用 filesDidChange 函数来模拟 file-upload 组件，而是使用 click 函数，我决定将 screenX 和 screenY 值发送到鼠标单击事件以 ember-progress-bar 组件作为进度。

ember-progress-bar 用作 application.hbs 中的上下文组件；其中 ember-progress-bar 产生 progressUpdated 动作，其模板内有 {{yield (hash progressUpdated=(action 'progressUpdated'))}}。在 application.hbs 内（其中 ember-progress-bar 以块形式使用）；这个产生的动作被检索并作为 onclick 动作传递给 file-upload 组件。

我不知道这是否对你有帮助；但这是我大量用于组件间通信的技术。由于上下文组件（从组件产生并在将要使用它的地方以块形式使用组件），我再次依赖动作。

Ember 中组件之间的通信

Communication between components in Ember

javascript

file-upload

ember.js

progress-bar