Component 的两种不同调用方式的区别

Component 支持 {{my-component}} 和<MyComponent /> 两种调用方式，{{}} 的形式支持位置参数，而 <> 形式默认都是带名字参数，如果在 Component 中声明了：

import Component from '@ember/component';

export default Component.extend({
}).reopenClass({
  positionalParams: ['greeting', 'name']
});

则调用的时候也必须显式指定：

<MyGreeting @greeting="Hello" @name="World" />

还可以直接指定数组的形式：

import Component from '@ember/component';

export default Component.extend({
}).reopenClass({
  positionalParams: 'params'
});

然后调用的时候告诉 params 是数组：

<MyGreeting @params={{array "Hello" "World"}}>

何时使用传统的形式

{{some-component param1 param2}}
{{ui/foo-bar}}

一个是占位参数，一个 Component 是按照文件目录嵌套调用的