我正在学习关于Ember的ij0k1l教程。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中使用传递数据的方式”*。
有人能照亮我吗？