Ember 3.2.6 如何向组件传递参数？参数不生效如何排查？

问题原因 #

你使用的Ember 3.2.6 版本支持@前缀的命名参数传递规则，对应在组件模板内引用外部传入的命名参数时，必须同步携带@前缀。不带前缀的{{userName}}默认会读取组件自身类实例的属性，不会指向外部传入的参数，因此才会出现参数值不显示的问题。

解决方案 #

直接修改app/components/user-card.hbs的变量引用格式，为所有传入参数加上@前缀即可：

<br/>
<strong>User Card</strong><br/>
<label>UserName: </label>{{@userName}}<br/>
<label>First Name: </label>{{@firstName}}<br/>
<label>Last Name: </label>{{@lastName}}<br/>

如果你想沿用原来不带@的模板写法，可以新增组件JS文件app/components/user-card.js，显式把传入参数映射为组件自身属性：

import Component from '@glimmer/component';

export default class UserCardComponent extends Component {
  get userName() {
    return this.args.userName;
  }
  get firstName() {
    return this.args.firstName;
  }
  get lastName() {
    return this.args.lastName;
  }
}

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