🦉 传送门(Portal)🦉
有时候,我们希望能够在组件的边界之外渲染某些内容。为此,Owl 提供了一个特殊的指令:t-portal
:
js
class SomeComponent extends Component {
static template = xml`
<div>这是组件内部的内容</div>
<div t-portal="'body'">这是组件外部的内容</div>
`;
}
t-portal
指令接受一个有效的 CSS 选择器作为参数。被传送的模板内容将会被挂载到对应的位置。请注意,Owl 需要在传送内容的位置插入一个空的文本节点。