基于命名约定创建自定义元素

Created: November-22, 2018

基于命名约定在 Aurelia 中创建基本自定义元素，只需将后缀 CustomElement 添加到类的名称即可。Aurelia 会自动删除此后缀。类名的其余部分将是小写的，并使用连字符分隔，然后可以用作元素名称。

示例： my-element.js

export class SuperCoolCustomElement {

}

<template>
    <h1>I am a custom element</h1>
</template>

使用它：

要使用新定义的自定义元素，首先需要从类名中检索标记名称。CustomElement 后缀将被剥离，其余部分（SuperCool）将在每个大写字母上以小写字母小写并用连字符分隔。因此，SuperCoolCustomElement 成为 super-cool 并形成我们元素的基础。

<template>
    <require from="./my-element"></require>

    <super-cool></super-cool>
</template>

值得注意的是，我们上面的例子有点人为。我们可能刚刚创建了一个仅 HTML 的自定义元素，而根本没有创建一个 viewmodel。但是，viewmodel 方法允许你提供可绑定属性以使你的元素可配置（如其他示例所示）。