Portal-Vue

外观

返回顶部
本页内容

PortalTarget

此组件是任何由 <Portal> 组件发送的内容的出口。它渲染接收到的内容，除此之外没有太多操作。

示例用法

html
<portal-target name="destination" />

片段

PortalTarget 现在渲染一个片段，这意味着：没有包装元素。

Props API

multiple

当 multiple 为 true 时，该门户将能够同时接收和渲染来自多个 <Portal> 组件的内容。

您应该在 <Portal> 上使用 order prop 来定义内容的渲染顺序。

来源

html
<portal to="destination" :order="2">
  <p>some content</p>
</portal>
<portal to="destination" :order="1">
  <p>some other content</p>
</portal>

<portal-target name="destination" multiple />

结果

html
<p>some other content</p>
<p>some content</p>

name

类型必需默认值
字符串是无

定义此门户目标的名称。<Portal> 组件可以通过此名称将内容发送到此实例。

slotProps

类型必需默认值
对象否{}

小贴士

此 prop 仅在 PortalTarget 从 <Portal> 的 作用域插槽 接收内容时才有用。

slotProps 对象用作 props 来渲染来自 <Portal> 的作用域插槽。

来源

html
<portal to="destination" v-slot="props" slot-props="{ state: 'nice!!' }">
  <p>This scoped slot content is so {{ props.state }}</p>
</portal>

<portal-target name="destination" slot-props="{state: 'cool!'}" />

结果

html
<p>This scoped slot content is so cool!</p>

它在 <Portal> 组件上具有相同名称的对应项，当 <Portal> 被禁用时将 props 传递给插槽内容。

插槽 API

默认插槽

如果来自任何源门户都没有内容，则会渲染任何现有的插槽内容。

示例

来源

html
<portal-target name="destination" tag="span">
  <p>This is rendered when no other content is available.</p>
</portal-target>

结果

html
<p>This is rendered when no other content is available.</p>

默认作用域插槽

默认插槽也可以是作用域插槽。作用域插槽接收 slotProps prop 作为其参数。

示例

来源

html
<portal-target name="target" :slotScope="{ message: 'Hi!' }" v-slot="props">
  <p>
    {{props.message}} This is rendered when no other content is available.
  </p>
</portal-target>

结果

html
<p>This is rendered when no other content is available.</p>

wrapper

此插槽可用于定义应包装从 <portal> 接收的内容的标记。这通常仅在与 multiple 结合使用时才有用，因为对于来自单个门户的内容，您只需包装整个 <portal-target>。

该插槽接收一个数组作为其唯一 prop，该数组包含表示来自源门户(s) 的内容的原始 vnode。

这些 vnode 可以使用 Vue 的动态组件语法渲染

<component :is="node">

示例

来源

html
<portal-target name="target">
  <template v-slot:wrapper="nodes">
    <component :is="node" v-for="node in nodes" />
  </template>
</portal-target>

此插槽也有助于 添加过渡（参见高级指南）。

事件 API

change

每次组件因 <Portal> 的内容发生变化而重新渲染时都会发出。

它接收一个具有两个属性的对象

js
{
  hasContent: boolean,
  sources: string[]
}
属性类型描述
hasContent布尔值指示 PortalTarget 当前是否有内容
sources字符串[]包含发送内容的门户(s) 的名称的数组
html
<template>
  <portal-target name="destination" @change="handleUpdate" />
</template>

<script>
  export default {
    methods: {
      handleUpdate({ hasChanged, sources }) {
        // do something with the info.
      },
    },
  }
</script>