Vue で名前付きスロットを設定する方法

Vue は人気のあるフロントエンド フレームワークであり、その重要な機能の 1 つはスロットです。スロットを使用すると、コンポーネントのコンテンツを他のコンポーネントに動的に挿入できます。 Vue では、スロットはデフォルト スロットと名前付きスロットの 2 つのタイプに分類されます。この記事では、Vue で名前付きスロットを設定する方法に焦点を当てます。

1. デフォルト スロット

デフォルト スロットは、Vue によってデフォルトで提供されるスロットであり、特別なプレースホルダー「スロット」でマークされています。デフォルトのスロットはコンポーネント内で使用されるため、コンポーネントのコンテンツをコンポーネントの特定の場所に動的に挿入できます。デフォルトのスロットには特別な設定は必要ありません。「スロット」プレースホルダーをコンポーネントに追加するだけです。

コンポーネントのサンプル コード:

<template>
   <div>
      <h1>这是一个默认插槽组件</h1>
      <slot></slot>
   </div>
</template>

上記のコードでは、これがデフォルトのスロットであることを示すために、コンポーネント内に「スロット」プレースホルダーを追加しました。このコンポーネントを他のコンポーネントで使用するときは、「slot」タグにコンテンツを挿入できます。例:

<template>
   <div>
      <my-component>
         <p>这是插入到默认插槽的内容</p>
      </my-component>
   </div>
</template>

上記のコードでは、段落タグを「my-component」コンポーネントに挿入します。デフォルトのスロット。

2. 名前付きスロット

デフォルトのスロットに加えて、Vue は別の種類のスロットという名前のスロットも提供します。名前付きスロットを使用すると、コンポーネント内に複数のスロットを定義し、それぞれに一意の名前を付けることができます。名前付きスロットは、複数のサブコンポーネントを含むコンテナ コンポーネントなど、より複雑なコンポーネントに適しています。 Vue では、「slot」タグの「name」属性を通じて名前付きスロットを定義できます。

名前付きスロットのサンプル コード:

<template>
   <div>
      <h1>这是一个具名插槽组件</h1>
      <slot name="header"></slot>
      <div class="content">
         <slot></slot>
      </div>
      <slot name="footer"></slot>
   </div>
</template>

上記のコードでは、「header」という名前の名前付きスロット、空の名前のデフォルト スロット、および名前付きスロットの 3 つのスロットを定義します。 「フッター」という名前。このコンポーネントを他のコンポーネント内で使用し、スロットごとに異なるコンテンツを提供できます。

名前付きスロットを使用したサンプル コード:

<template>
   <div>
      <my-component>
         <template v-slot:header>
            <h2>这是插入到header插槽中的内容</h2>
         </template>
         <p>这是插入到默认插槽中的内容</p>
         <template v-slot:footer>
            <p>这是插入到footer插槽中的内容</p>
         </template>
      </my-component>
   </div>
</template>

上記のコードでは、「v-slot」ディレクティブを使用して、名前付きスロットごとにコンテンツを提供しました。 「v-slot:header」ディレクティブを使用すると、「header」という名前のスロットにヘッダー タグを挿入します。 「v-slot:footer」コマンドを使用して、「footer」という名前のスロットに段落タグを挿入します。デフォルトのスロットに段落タグを挿入しました。

概要

Vue でスロットを使用すると、コンポーネントをより便利に再利用できると同時に、コードの可読性と保守性も向上します。スロットを使用するプロセスでは、デフォルトのスロットを使用するか、名前付きスロットを使用するかを選択できます。どのタイプのスロットを使用するかは、コンポーネントの要件によって異なります。名前付きスロットは、コンポーネント内で複数のスロットを定義し、各スロットに特定のコンテンツを提供する必要がある場合に最適です。

以上がVue で名前付きスロットを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。