Vue は、ページ上のコンポーネントを管理および整理する便利な方法を提供する、人気のあるフロントエンド フレームワークです。その中でも、スロットは Vue の非常に実用的な機能であり、コンポーネント内のコンテンツを動的に配布するのに役立ちます。この記事では、Vue でスロットを使用してコンテンツを配布する方法と、追加の使用方法と注意事項を紹介します。
Vue では、スロットは、子コンポーネントがコンテンツを直接挿入できるように、親コンポーネント テンプレート内の子コンポーネントにスロットを提供するために使用されます。親コンポーネントのテンプレートに追加します。スロットを使用する場合は、通常、親コンポーネント テンプレートにスロット タグを追加し、子コンポーネントに名前付きスロットとデフォルト スロットを追加します。
デフォルト スロットは名前のないスロットで、デフォルトのコンテンツをサブコンポーネントに挿入するために使用できます。デフォルトのスロットは、特別なプレースホルダー
名前付きスロットは name 属性によって定義され、コンテンツが親コンポーネント テンプレートに挿入される名前付きスロットを指定できます。例:
<h3>这是一个标题</h3>
< ; /template>
<p>这是一个底部</p>
これは一部のコンテンツです
<slot name="header"></slot>
<!-- 默认插槽 -->
<slot></slot>
<slot name="footer"></slot>
ログイン後にコピー
< ;/template>
この例では、親コンポーネントは名前付きスロットを使用してテンプレート内のヘッダーとフッターの位置を指定し、またデフォルトのスロットを使用して p 要素の位置を指定します。
Vue では、スロットにも一般的な使用法がいくつかあり、これによりコードがより簡潔で柔軟かつ強力になります。
2.1 排他的なデフォルト スロット
場合によっては、親コンポーネントにコンテンツを配布するのではなく、子コンポーネントにデフォルト スロットを占有させたい場合があります。この場合、 v-slot:default ディレクティブを使用して、サブコンポーネントのテンプレートとしてデフォルトのスロットを使用するように Vue に指示できます。例:
これは親への挿入ですコンポーネント「エフェクト」の内容。 {{ slotProps.msg }}
