参考自定义元素视图模型在槽内

Aurelia - Reference custom element view model inside slot

本文关键字：模型 视图 自定义 元素 参考      更新时间：2023-09-26

如果我有一个这样的自定义元素:

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>

据我所知，这是无法通过插槽实现的。

然而，Aurelia有一个功能叫做replaceable parts: [Blog post]。这可能更符合您的要求。

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

Edit: HUB docs: [Cheat Sheet/Template Parts]

相关文章：