Portal-Vue

外観

トップに戻る
このページ

ポータルコンポーネント

ポータルコンポーネント内で他の場所で描画するすべてのコンテンツをラップします。

使用例

html
<portal
  to="nameOfDestination"
  tag="span"
  :disabled="isDisabled"
>
  <p>This content will be sent through the portal</p>
</portal>

プロパティAPI

disabled

タイプ必須デフォルト
booleanいいえfalse

trueの場合、スロットコンテンツは定義されたポータルターゲットにポータル経由で送信されません。

代わりに、その場で描画されます

ソース

html
<portal :disabled="true">
  <p>some content</p> 
</portal>

結果

html
<p>some content</p>

フラグメント

ポータルはフラグメントをレンダリングするようになりました。つまり、コンテンツの周りにルートノードをレンダリングしなくなりました。これはVue 3でサポートされている新しい機能であり、ここで非常に役立ちます。不要なラッパー要素はありません!

ローカルコンポーネント状態

有効/無効状態を切り替えると、ポータルスロット内のコンポーネントが破棄されて再作成されるため、ローカル状態への変更はすべて失われます。

name

タイプ必須デフォルト
文字列いいえランダムな文字列

このオプションプロパティは通常省略できます。ポータルはランダムな文字列を生成して、ポータルターゲットに送信されるコンテンツのソースの識別子を提供できるためです。

しかし、デバッグを容易にするためにポータルコンポーネントに名前を付けることをお勧めします。

order

タイプ必須デフォルト
数値いいえ*0

このプロパティは、ポータルターゲットの出力を順序付きの位置で定義します。

ヒント

このプロパティは、ポータルがmultipleプロパティが設定されているポータルターゲットにコンテンツを送信する場合にのみ役立ちます。

ソース

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

タイプ必須デフォルト
オブジェクトいいえ{}

このプロパティは、次の場合にのみ役立ちます

その場合、slotPropsに渡すオブジェクトは、コンテンツをその場で正しく表示するためにスコープ付きスロットに渡されるプロパティを定義するために使用されます

ポータルターゲットコンポーネントには（より役立つ）対応プロパティがあります

ソース

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

タイプ必須デフォルト
文字列はいランダムな文字列

スロットコンテンツの描画先のポータルターゲットコンポーネントの名前を定義します。

ソース

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>