Aurelia组件绑定

Question

我是这个框架的新手，我想知道是否有一个组件绑定允许您指定要在常规HTML元素上使用的组件而不是自定义组件。

假设我们有一个Message组件。是否可以将其用作：

<div component="message"></div>

而不是

<message></message>

Knockout.js支持其组件：The "component" binding.

Answer 1

是的！您可以使用as-element自定义属性执行此操作。

以下是一个示例：https://gist.run?id=5fc98df81dff7eec2868ea918f6342fb

<强> app.html

<template>
   <require from="./message"></require>

   <message say="Say"></message>

   <div as-element="message" say.bind="what"></div>
</template>

<强> app.js

export class App {
  what = 'What!'
}

<强> message.html

<template>
  <h1>${say}</h1>
</template>

<强> message.js

import {bindable} from 'aurelia-framework';

export class MessageCustomElement {
  @bindable say = '';
}

<强>呈现