在Ember / handlebars组件中class =“example”与classNames =“example”有什么区别？

Question

我正在将一个类应用于一个组件，看起来这两个选项都有效：

1. {{example-component class="example-class"}}

2. {{example-component classNames="example-class"}}

两者最终都会导致呈现的HTML具有类，例如：

<div class="example-class ember-view">...</div>

通过class或classNames提供课程有什么区别吗？使用一个而不是另一个会产生意想不到的后果吗？

Answer 1

没有重要的区别，除了该类应该是一个字符串而classNames应该是一个字符串数组。

如果你在.hbs调用时传递一个类，我建议你在第一个例子中使用class属性，因为它与为常规HTML元素指定类的方式相同。

属性classNames可以在.js文件中使用。 即我经常使用这样的模式：

// my-small-button.js
import Component from '@ember/component';

export default Component.extend({
  classNames: ['my-button', 'small']
});

调用组件：

{{my-small-button class="red"}}

结果-HTML：

<div class="my-button small red">
</div