スロットを使用して Vue でコンテンツを配布する方法

Vue は、ページ上のコンポーネントを管理および整理する便利な方法を提供する、人気のあるフロントエンド フレームワークです。その中でも、スロットは Vue の非常に実用的な機能であり、コンポーネント内のコンテンツを動的に配布するのに役立ちます。この記事では、Vue でスロットを使用してコンテンツを配布する方法と、追加の使用方法と注意事項を紹介します。

1. スロットの仕組み

Vue では、スロットは、子コンポーネントがコンテンツを直接挿入できるように、親コンポーネント テンプレート内の子コンポーネントにスロットを提供するために使用されます。親コンポーネントのテンプレートに追加します。スロットを使用する場合は、通常、親コンポーネント テンプレートにスロット タグを追加し、子コンポーネントに名前付きスロットとデフォルト スロットを追加します。

デフォルト スロットは名前のないスロットで、デフォルトのコンテンツをサブコンポーネントに挿入するために使用できます。デフォルトのスロットは、特別なプレースホルダー を使用して定義されます。

名前付きスロットは name 属性によって定義され、コンテンツが親コンポーネント テンプレートに挿入される名前付きスロットを指定できます。例:

8abb24ab0de6ed5f68dcb6839b7bbcad
f83d88e8f85ba06872eba1bcadd9eb26
1b54d73e74b22f631033be1d0207faea

<h3>这是一个标题</h3>

< ; /template>
f65a1353a6587d0a0b240ab3c9b24398

<p>这是一个底部</p>

21c97d3a051048b8e55e3c8f199a54b2
e388a4556c0f65e1904146cc1a846beeこれは一部のコンテンツです94b3e26ee717c64999d7867364b1b4a3
9946765f91ae4543ce3e68c65958fe9e

f2d36ed5daa8577a94d0e29ec51b9c9e
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<slot name="header"></slot>
<!-- 默认插槽 -->
<slot></slot>
<slot name="footer"></slot>

16b28748ea4df4d9c2150843fecfba68
e4c6f86f35e644cc6377923835cf3ded

この例では、親コンポーネントは名前付きスロットを使用してテンプレート内のヘッダーとフッターの位置を指定し、またデフォルトのスロットを使用して p 要素の位置を指定します。

2. スロットの使用法

Vue では、スロットにも一般的な使用法がいくつかあり、これによりコードがより簡潔で柔軟かつ強力になります。

2.1 排他的なデフォルト スロット

場合によっては、親コンポーネントにコンテンツを配布するのではなく、子コンポーネントにデフォルト スロットを占有させたい場合があります。この場合、 v-slot:default ディレクティブを使用して、サブコンポーネントのテンプレートとしてデフォルトのスロットを使用するように Vue に指示できます。例:

8abb24ab0de6ed5f68dcb6839b7bbcad
f83d88e8f85ba06872eba1bcadd9eb26
6528afea30cac280f6d4e34474862560446adb68decd1b5209d9648989fcb285

b29dc7a1eda2e8a13260b39aef1260e2
d477f9ce7bf77f53fbcf36bec1b69b7a
e388a4556c0f65e1904146cc1a846beeこれは親への挿入ですコンポーネント「エフェクト」の内容。

2.2 スコープ付きスロット

親コンポーネント内の子コンポーネントのデータにアクセスしたい場合があります。この場合、スコープ付きスロット (スコープ付きスロット) を使用して、子コンポーネントのデータ。データは親コンポーネントに渡されます。スコープ スロットは、スロットによって親コンポーネントに渡されるデータであるパラメータを含むスロット タグを使用して定義されます。例:

8abb24ab0de6ed5f68dcb6839b7bbcad

f83d88e8f85ba06872eba1bcadd9eb26

91cdef52489e39baa15fb6058fd1c7e8258a99cd8e43b8a54428793c021c8849

e388a4556c0f65e1904146cc1a846bee{{ slotProps.msg }}94b3e26ee717c64999d7867364b1b4a3
13b01f794c566c82cfbadbb090e5f686

b5dbc54446b59b4f95a4ce29e0ee33f3
7ab6b075cc6c7bcbe15d0b9685c6f1da

4a338a82535d73d1e5db2404ac223bdb{{ アイテム }}94b3e26ee717c64999d7867364b1b4a3

9cd7f6347bd64a77c4c62917c61d29cf

<p v-for="item in items" :key="item">{{ item }} - 处理后</p>

21c97d3a051048b8e55e3c8f199a54b2
21c97d3a051048b8e55e3c8f199a54b2

この例では、名前付きスロット名を使用し、次を使用します。親コンポーネントの v-slot:name ディレクティブを使用して、子コンポーネントによって渡されたデータ slotProps を受け取ります。子コンポーネントでは、items 配列をループし、スコープ スロットを使用してデータを親コンポーネントに渡します。親コンポーネントでは、{{ slotProps.msg }} を使用して、渡されたデータにアクセスします。

注意事項

3. スロットを使用する場合は、次の点に注意する必要があります。

3.1 スロットには、デフォルト スロットが 1 つしかありません。コンポーネント内で複数のデフォルト スロットを定義する必要がある場合は、代わりに名前付きスロットを使用できます。

3.2 スロットを使用する場合、親コンポーネント テンプレート内のすべてのコンテンツをスロットに含める必要があります。そうでない場合、Vue はエラーを報告します。

3.3 スコープ スロットを使用する場合は、名前の競合に注意する必要があります。親コンポーネントと子コンポーネントの両方に同じ名前の変数またはメソッドがある場合、予期しない結果が発生する可能性があります。

概要

4. Vue では、スロットはコンテンツをコンポーネントに動的に配布するのに役立つ非常に便利な関数です。名前付きスロットとスコープ付きスロットを使用することで、コンポーネントをより柔軟かつ強力にすることができます。スロットを使用する場合は、デフォルトのスロットは 1 つだけであるなど、いくつかの注意事項に注意する必要があります。つまり、スロットは Vue の非常に重要なメカニズムであり、ページ内のコンポーネントの管理と整理に役立ちます。

以上がスロットを使用して Vue でコンテンツを配布する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。