Question

如果我有这样的自定义元素：

export class mycomponent {
    constructor() {
         this.name = 'John Doe';
    }
}

<template>
     My component
     <slot></slot>
</template>

在另一个视图中使用此组件（我全局注册了自定义元素）：

<template>
    <mycomponent>
        Test
        ${name}
    </mycomponent>
</template>

是否可以在此范围内访问mycomponent的视图模型？比如打印出它的属性name，例如？

修改所以这是我的最终解决方案：gist my solution

我把可更换的部分放在我的自定义元素中：

<template>
  <template replaceable part="content"></template>
</template>

然后在视图模型上的processContent属性：

import { processContent } from 'aurelia-framework';

@processContent(replacePart)
export class MyComponent {
  name = "John Doe";
}

function replacePart(compiler, resources, node){
    node.innerHTML = `<template replace-part="content">${node.innerHTML}</template>`;
    return true;
}

就像这样，它更像是一个语法清晰的插槽：

<h4>Component 1</h4>
<my-component>
    <div>One name</div>
    <strong>${name}</strong>
</my-component>

Answer 1

据我所知，使用插槽无法实现。

但是，Aurelia有一个名为replaceable parts的功能：[Blog post]。这可能更适合您的要求。

演示：https://gist.run/?id=dcffe2afcb1eee1777e9b0d9f7366d28

编辑：HUB文档：[Cheat Sheet / Template Parts]

Aurelia - 在插槽内引用自定义元素视图模型

1 个答案: