PortalTarget
このコンポーネントは、<Portal> コンポーネントで送られた任意のコンテンツ用のアウトレットです。受信したコンテンツを表示し、それ以上の動作はありません。
使用例
<portal-target name="destination" />
フラグメント
PortalTarget はフラグメントを表示するようになり、ラップ要素がなくなりました。
Props API
multiple
multiple が true の場合、このポータルは複数の <Portal> コンポーネントから同時にコンテンツを受け取ってレンダリングできるようになります。
コンテンツの表示順序を定義するには、 <Portal> の order プロパティを使用する必要があります
ソース
<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 />
結果
<p>some other content</p>
<p>some content</p>
name
| タイプ | 必須 | 既定値 |
|---|---|---|
文字列 | はい | なし |
このポータルターゲットの名前を定義します。<Portal> コンポーネントはこの名前でこのインスタンスにコンテンツを送信できます。
slotProps
| タイプ | 必須 | 既定値 |
|---|---|---|
オブジェクト | いいえ | {} |
ヒント
このプロパティは、PortalTarget が <Portal> の スコープ付きスロット からコンテンツを受信する場合にのみ有効です。
slotProps オブジェクトは、<Portal> のスコープ付きスロットをレンダリングするためのプロパティとして使用されます。
ソース
<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!'}" />
結果
<p>This scoped slot content is so cool!</p>
<Portal> コンポーネントで同じ名前の対応するプロパティがあり、<Portal> が無効になっているときにプロパティをスロットコンテンツに渡します。
スロット API
既定のスロット
任意の既存のスロットコンテンツは、ソースポータルからのコンテンツが利用できない場合にレンダリングされます。
例
ソース
<portal-target name="destination" tag="span">
<p>This is rendered when no other content is available.</p>
</portal-target>
結果
<p>This is rendered when no other content is available.</p>
既定のスコープ付きスロット
既定のスロットはスコープされることもできます。スコープ付きスロットは、slotProps プロパティをその引数として受け取ります。
例
ソース
<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>
結果
<p>This is rendered when no other content is available.</p>
wrapper
このスロットを使用して、 <portal> から受信したコンテンツをラップするマークアップを定義できます。これは通常、 multiple と組み合わせてのみ役立ちます。単一のポータルのコンテンツの場合、 <portal-target> を全体としてラップできます。
このスロットは、ソースポータルから送信されたコンテンツを表す未加工の vnode を含む配列を唯一のプロパティとして受け取ります。
これらの vnode は、Vue の動的コンポーネント構文でレンダリングできます
<component :is="node">
例
ソース
<portal-target name="target">
<template v-slot:wrapper="nodes">
<component :is="node" v-for="node in nodes" />
</template>
</portal-target>
このスロットは、トランジションを追加するのにも役立ちます（高度なガイドを参照）。
イベント API
change
<ポータル>からのコンテンツが変更されたため、コンポーネントが再レンダリングされるたびに発生します。
2 つのプロパティを持つオブジェクトを受信します。
{
hasContent: boolean,
sources: string[]
}
| プロパティ | タイプ | 説明 |
|---|---|---|
| hasContent | boolean | 現在、ポータルターゲットにコンテンツがあるかどうかを示します。 |
| ソース | string[] | コンテンツを送信したポータルの名前の配列 |
<template>
<portal-target name="destination" @change="handleUpdate" />
</template>
<script>
export default {
methods: {
handleUpdate({ hasChanged, sources }) {
// do something with the info.
},
},
}
</script>