Portal 组件
将您想在其他地方渲染的任何内容包装在 Portal 组件中。
示例用法
html
<portal
to="nameOfDestination"
tag="span"
:disabled="isDisabled"
>
<p>This content will be sent through the portal</p>
</portal>
Props API
disabled
| 类型 | 必需 | 默认 |
|---|---|---|
布尔值 | 否 | false |
当 true 时，插槽内容 不会 通过 portal 发送到定义的 PortalTarget。
而是会在原位渲染
源
html
<portal :disabled="true">
<p>some content</p>
</portal>
结果
html
<p>some content</p>
片段
Portal 现在渲染一个片段，这意味着它不会在内容周围渲染根节点。这是 Vue 3 中支持的新功能，而且在这里非常有用 - 不再有多余的包装元素了！
本地组件状态
在启用/禁用状态之间切换时，portal 插槽中的组件会被销毁并重新创建，这意味着它们本地状态的任何更改都会丢失。
name
| 类型 | 必需 | 默认 |
|---|---|---|
字符串 | 否 | 随机字符串 |
这个可选属性通常可以省略，因为 Portal 可以生成一个随机字符串来为发送到 PortalTarget 的内容的来源提供标识符。
但是，为 Portal 组件命名可能是个好主意，这样你就可以在需要时更容易地调试它们。
order
| 类型 | 必需 | 默认 |
|---|---|---|
数字 | 否* | 0 |
此属性定义 PortalTarget 输出中的顺序位置。
提示
此属性仅在 Portal 将内容发送到具有 multiple 属性的 PortalTarget 时才有用。
源
html
<portal name="destination" :order="2"> <p>some content</p> </portal>
<portal name="destination" :order="1"> <p>some other content</p> </portal>
<portal-target name="destination" multiple />
结果
html
<p>some other content</p>
<p>some content</p>
slotProps
| 类型 | 必需 | 默认 |
|---|---|---|
对象 | 否 | {} |
此属性仅在
disabled属性为true，并且Portal的插槽内容是 作用域插槽 时才有用。
如果是这种情况，那么传递给 slotProps 的对象将用于定义传递给作用域插槽的属性，以正确地显示内容。
它在 PortalTarget 组件中有一个（更有用）的对应项
源
html
<portal
to="destination"
disabled
:slot-props="{state: 'disabled!'}"
v-slot="props"
>
<p>This scoped slot content is {{ props.state }}</p>
</portal>
结果
html
<p>This scoped slot content is disabled!</p>
to
| 类型 | 必需 | 默认 |
|---|---|---|
字符串 | 是 | 随机字符串 |
这定义了应该在其中渲染插槽内容的 PortalTarget 组件的名称。
源
html
<portal to="destination">
<p>some content</p>
</portal>
<div class="target">
<portal-target name="destination" />
</div>
结果
html
<!-- the <portal> renders nothing -->
<div class="target">
<p>some content</p>
</div>