Vue3 のスロット機能の詳細説明: スロットを使用してより柔軟なコンポーネント アプリケーションを実装する

Vue3 ではスロットを利用することで、より柔軟なコンポーネントの適用が可能になりますので、本記事では Vue3 におけるスロット機能の応用について詳しく紹介します。

1. スロットについて理解する

Vue では、スロットは特別なタグであり、その機能は HTML のテンプレートに似ており、コンポーネントの挿入に使用できます。 Vue3 のスロットは Vue2 よりもはるかに高度であり、より柔軟な使用法を提供します。

2. デフォルトのスロットを使用する

Vue3 では、コンポーネント テンプレートでデフォルトのスロットを使用できます。デフォルトのスロットは、コンポーネント シーンに不確実な数の子ノードが含まれる場合、これらの子ノードをコンポーネント タグに配置して最終的にレンダリングできることを意味します。これは、Vue2 のスロットのようなデフォルトのスロットを使用するのと同じくらい簡単です。

たとえば、HelloWorld という名前のコンポーネントを定義でき、コンポーネント テンプレートにはデフォルトのスロットが含まれています。

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <slot></slot>
  </div>
</template>

このコンポーネントは、h1 タグとデフォルトのスロットをレンダリングします。

このコンポーネントを使用する場合、次のようにデータを渡すことができます:

<template>
  <HelloWorld title="Welcome to my page">
    This is my website.
  </HelloWorld>
</template>

レンダリングされる HTML コードは次のとおりです:

<div class="hello">
  <h1>Welcome to my page</h1>
  <slot>This is my website.</slot>
</div>

ご覧のとおり、次のようになります。コンポーネントの場合、「This is my website.」をデフォルトのスロットに渡すと、コンポーネントはそれをテンプレートに追加します。

3. 名前付きスロットを使用する

場合によっては、複数のスロットを使用する必要があります。この機能は Vue3 でも提供されています。名前付きスロットは、スロット タグに name 属性を追加して、スロットの名前を定義します。例:

<template>
  <div class="todo-list">
    <h3>任务清单</h3>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <slot name="task" :task="task"></slot>
      </li>
    </ul>
  </div>
</template>

このコンポーネントでは、「task」という名前のスロットを定義し、パラメーター task を渡します。このコンポーネントを使用する場合、タグ内の v-slot ディレクティブを使用して、名前付きスロットと一致させることができます。

<template>
  <TodoList>
    <template #task="{ task }">
      <span>{{ task.name }}</span>
      <button v-if="task.isComplete" @click="task.isComplete = false">完成</button>
      <button v-else @click="task.isComplete = true">未完成</button>
    </template>
  </TodoList>
</template>

上の例では、テンプレート タグと v-slot ディレクティブを使用して、使用するものを指定しました。スロット名は「タスク」です。ここではタスク名を指定し、v-if 命令と v-else 命令を使用してタスクが完了したかどうかを判断します。

4. スコープ スロットを使用する

Vue3 では、名前付きスロットに加えて、スコープ スロットの機能も提供します。スコープ スロットは、名前付きスロットのパラメーターを使用して、データを渡すだけでなく、より複雑なテンプレートをレンダリングすることもできます。

たとえば、リスト コンポーネントがあり、各リスト項目はそれ自体を削除するボタンをレンダリングする必要があります。このようなコンポーネントは、vue.js のスコープ付きスロットを使用して実装できます。

<template>
  <ul>
    <slot v-for="item in items" :item="item" v-bind="item"></slot>
  </ul>
</template>

このコンポーネントでは、「default」という名前のスコープ スロットを使用して items 配列内の各項目を走査し、サブコンポーネントが項目にアクセスできるようにそれらの項目を渡します。

このコンポーネントを使用する場合、タグ内でテンプレートと v-slot ディレクティブを使用してスコープ スロットに一致させる必要があります:

<template>
  <List :items="todos">
    <template #default="props">
      <li>
        <input type="checkbox" v-model="props.item.isDone" />
        <span :class="{ done: props.item.isDone }">{{ props.item.text }}</span>
        <button @click="remove(props.item)">x</button>
      </li>
    </template>
  </List>
</template>

この例では、「#」を使用します。スコープ スロットは次のとおりです。定義されており、データは props を通じてアクセスされます。

概要

Vue3 のスロット関数は、より複雑なコンポーネントの実装に役立つさまざまな柔軟な使用法を提供します。デフォルトのスロットを使用してテンプレートを通じてコン​​テンツを挿入したり、名前付きスロットを使用して複数のスロットを渡したり、スコープ スロットを使用して複雑なテンプレートやデータを渡したりできます。これらの機能を通じて、より柔軟なコンポーネントを作成し、コードの再利用と可読性を向上させることができます。

以上がVue3 のスロット機能の詳細説明: スロットを使用してより柔軟なコンポーネント アプリケーションを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。