如何在Ember.js 5.4中向组件传递对象数据

要解决循环中向子组件传递数据的问题，只需要完成父组件传参和子组件接收参数两个步骤，以下是具体修改方案：

1. 父组件模板传参 #

修改main-axis.hbs，在调用LinearAxis组件时，通过@前缀传递当前循环的axis对象（也可以拆分传递单个属性，比如@title={{axis.title}}）：

<div class="row">
 {{#each this.exampleArray as |axis|}}
    <div class="col-12 col-lg-6">
      <!-- 传递整个axis对象给子组件 -->
      <LinearAxis @axis={{axis}} />
    </div>
 {{/each}}
</div>

2. 子组件接收并使用参数 #

Ember Glimmer组件的所有传入参数都存放在this.args对象中，你有两种方式在子组件中使用这些参数：

方式一：直接在模板中访问this.args #

修改linear-axis.hbs，直接通过this.args.axis获取传递过来的对象：

<div class="card">
  <div class="card-header">
    Axis {{this.args.axis.title}}
  </div>
  <div class="card-body">
    <p class="card-text">Number: {{this.args.axis.id}}</p>
    <button type="button" class="btn btn-primary btn-sm">Click</button>
  </div>
</div>

这种方式下，linear-axis.js可以保持原有的空类，无需修改。

方式二：在组件类中定义getter简化模板写法 #

如果你希望模板更简洁，可以在linear-axis.js中定义getter，将this.args中的属性映射到组件实例上：

import Component from '@glimmer/component';

export default class LinearAxis extends Component {
  // 通过getter获取title
  get title() {
    return this.args.axis.title;
  }

  // 通过getter获取id
  get id() {
    return this.args.axis.id;
  }
}

此时linear-axis.hbs可以保持你原来的写法不变，直接使用this.title和this.id：

<div class="card">
  <div class="card-header">
    Axis {{this.title}}
  </div>
  <div class="card-body">
    <p class="card-text">Number: {{this.id}}</p>
    <button type="button" class="btn btn-primary btn-sm">Click</button>
  </div>
</div>

核心原理 #

Ember 3.13+引入的Glimmer组件，所有外部传入的参数都通过this.args对象暴露，这是组件间传递数据的标准方式，和传统Ember组件的this.get()用法不同，需要注意区分。

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