EmberJS：将参数传递给组件

Question

我正在关注 this 关于 Ember.js 的教程，但我正在努力理解一个“简单”的参数传递问题。

我有一个 product JSON 对象：

{
  "id": "1",
  "name": "Headphones",
  "colors": [{
    "color": "red",
    "image": "/assets/images/headphones-red.png"
  },
  {
    "color": "black",
    "image": "/assets/images/headphones-black.png"
  }]
},
...
other products with the same structure

并且此对象被传递到 index.hbs 模板内的 Product 组件，如下所示：

<Product @product={{product}}/>

在 Product.hbs 模板中，我有以下内容：

<Product::Image @src={{this.productImage}}/>
<Product::Details 
    @name={{@product.name}}
/>

productImage 在 Product 的组件关联中定义 product.js:

import Component from '@glimmer/component';

export default class ProductComponent extends Component {
    productImage = this.args.product.colors[0].image;
}

我的问题是：为什么我必须定义一个特定的组件属性而不是像 name 属性那样做？像这样：

<Product::Image @src={{@product.colors[0].image}}/>

教程没有解释，只说了“args代表参数，也就是传参属性。我们在JS内部就是这样使用传参的”.

有人可以启发我吗？

Answer 1

我想没有特别的理由定义一个单独的属性来做到这一点，除了在这种特殊情况下它增加了可读性，即“哦，我们通过产品图像”而不是“我们通过colors 数组第一个元素的图像值”，但我很确定这是不言而喻的。

可以按照您的建议进行操作，但语法略有不同。问题是hbs不理解colors[0]。但它会理解 colors.[0] 甚至 colors.0。可能是

<Product::Image @src={{@product.colors.[0].image}}/>

or

<Product::Image @src={{@product.colors.0.image}}/>

而且我在 twiddle

中尝试了一些其他选项

EmberJS：将参数传递给组件

EmberJS: passing arguments into components

javascript

ember.js