Vue でスロットという名前の v-slot を使用する方法

Vue は人気のある JavaScript フレームワークであり、フロントエンドのシングルページ アプリケーションを構築する場合に特に人気があります。 Vue はさまざまな組み込み関数と API を提供しており、その 1 つは v-slot という名前のスロットを使用するものです。この記事では、v-slot という名前のスロットの概念を理解し、実際の例を示しながらその使用方法を説明します。

v-slot という名前のスロットとは何ですか?

v-slot 名前付きスロットは、Vue のより柔軟で強力なスロット メカニズムです。基本的な概念は、コンポーネント内に独自のコンテンツを挿入できるように、コンポーネントに追加の挿入ポイント (スロットなど) を提供することです。 v-slot 名前付きスロットを使用すると、コンポーネント テンプレート内で参照できるようにスロット名を付けることができます。

Vue 2.x では、v-slot ディレクティブを使用してスロットのコンテンツを定義し、親コンポーネントの実行時にそれを子コンポーネントに渡します。 Vue 3.x では、v-slot ディレクティブの名前が # に変更されましたが、構文は同じままです。

スロットという名前の v スロットの使用

実際の例を通じて、スロットという名前の v スロットの使用方法を示します。

ToDo 項目を表示する TodoList コンポーネントを作成します。 v-slot という名前のスロットを使用して、2 つのスロットを作成します。1 つは To Do リストの 1 つの項目の内容を表示するもので、もう 1 つはリストの終了後の内容を表示するものです。

以下は TodoList コンポーネント テンプレートのサンプル コードです:

<template>
  <div>
    <h2 id="title">{{ title }}</h2>
    <ul>
      <slot name="item" v-for="item in items" :item="item"></slot>
    </ul>
    <slot name="after"></slot>
  </div>
</template>

上記のコードでは、v-for ディレクティブを使用して items 配列をループし、次にスロット ディレクティブを使用します。 v-for 要素を動的に移動するには、「アイテム」スロットに挿入します。同様に、リストの末尾に「after」という名前のスロットを定義して、リストの末尾の後のコンテンツを表示します。

次に、TodoList コンポーネントを使用した例を見てみましょう。以下は、親コンポーネント テンプレートのサンプル コードです。

<template>
  <div>
    <todo-list :title="title" :items="items">
      <template v-slot:item="props">
        <li>{{ props.item }}</li>
      </template>
      <template v-slot:after>
        <p>List ended.</p>
      </template>
    </todo-list>
  </div>
</template>

<script>
import TodoList from './TodoList.vue';

export default {
  name: 'App',
  components: {
    TodoList,
  },
  data() {
    return {
      title: 'My Todo List',
      items: ['Item 1', 'Item 2', 'Item 3'],
    };
  },
};
</script>

上記のコードでは、最初にインポート ディレクティブを通じて TodoList コンポーネントをインポートします。次に、親コンポーネント テンプレートの todo-list 要素を使用し、v-bind ディレクティブを介してデータを TodoList コンポーネントに渡します。最後に、名前付きスロットを使用して、カスタム項目と終了コンテンツを TodoList コンポーネントに挿入します。

概要

この記事では、Vue の v-slot という名前のスロットの概念と使用法を学びました。 v-slot という名前のスロットを使用すると、コンポーネントのコンテンツをより適切に制御し、より柔軟で強力な方法で再利用可能なコンポーネントを作成できます。実際のプロジェクトで v-slot という名前のスロットを使用する場合は、コードを読みやすく、保守しやすくするために、スロットに意味のある名前を付けます。

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