Vue ith コンポジション API のスロットを理解する-jsチュートリアル-php.cn

Understanding Slots in Vue ith Composition API

スロットは、コンポーネントが親コンポーネントによってカスタマイズできるコンテンツ領域を定義できるようにする Vue の強力なメカニズムです。これにより、UI コンポーネントの構築における再利用性と柔軟性が促進されます。 Vue 3 は 2 つの主要なスロットタイプを提供します:

通常スロット: 親コンポーネントから子コンポーネントのテンプレートにコンテンツを挿入する簡単な方法を提供します。
スコープ付きスロット: 子コンポーネントからスロットのコンテンツにデータ (スコープ) を渡すことで、より高度なカスタマイズが可能になり、親データと子のデータの両方に基づいた動的なレンダリングが可能になります。

Vue 3 では、スロットを使用して子コンポーネントにコンテンツを渡す方法を提供することで、柔軟なコンポーネントを作成できます。 Comboposition API はスロットの使用方法を強化し、より直感的で強力なものにします。

スロットとは何ですか?

スロットは、コンポーネントの使用時にカスタムコンテンツを入力できるコンポーネント内のプレースホルダーコンテンツを定義する方法です。これらは、再利用可能でカスタマイズ可能なコンポーネントの作成に役立ちます。

スロットの種類

デフォルトスロット: 最も一般的なタイプで、特定の名前なしでコンテンツを渡すことができます。
名前付きスロット: 異なるスロットを一意の名前で指定できるため、より複雑なレイアウトが可能になります。
スコープ付きスロット: これらは、スロットを使用して子コンポーネントから親コンポーネントにデータを公開する方法を提供します。コンポジション API でのスロットの使用

コンポジション API でのスロットの使用

Composition API を使用して Vue 3 コンポーネントでスロットを定義して使用する方法は次のとおりです。
デフォルトスロットの例

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

ログイン後にコピー

使用法:

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

ログイン後にコピー

名前付きスロット

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

ログイン後にコピー

使用法:

<LayoutComponent>
  <template #header>
    <h1>Header Content</h1>
  </template>

  <p>Main Content goes here!</p>

  <template #footer>
    <footer>Footer Content</footer>
  </template>
</LayoutComponent>

ログイン後にコピー

スコープ付きスロット

スコープ付きスロットを使用すると、子コンポーネントから親にデータを渡すことができます。

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MessageComponent',
  setup() {
    const message = ref("Hello from the child!");

    return { message };
  },
});
</script>

ログイン後にコピー

使用法:

<MessageComponent>
  <template #default="{ message }">
    <p>{{ message }}</p>
  </template>
</MessageComponent>

ログイン後にコピー

例: Vue 3 のスロットを使用した食品配達

Composition API とスロットを備えた Vue 3 を使用して、簡単なフードデリバリーアプリケーションを作成してみましょう。この例では、スロットを使用して食品項目のリストとヘッダーとフッターを表示するメインの Fooddelivery コンポーネントを紹介します。

ステップ 1: メインコンポーネントを作成する

これは、ヘッダー、食品項目、フッターの名前付きスロットを受け入れる Fooddelivery コンポーネントです。

<template>
  <div class="food-delivery">
    <slot name="header"></slot>
    <div class="food-items">
      <slot></slot>
    </div>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodDelivery',
});
</script>

<style>
.food-delivery {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}

.food-items {
  margin: 20px 0;
}
</style>

ログイン後にコピー

ステップ 2: 食品コンポーネントの作成

次に、個々の食品を表す単純な FoodItem コンポーネントを作成しましょう。

<template>
  <div class="food-item">
    <h3>{{ name }}</h3>
    <p>Price: ${{ price.toFixed(2) }}</p>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'FoodItem',
  props: {
    name: {
      type: String,
      required: true,
    },
    price: {
      type: Number,
      required: true,
    },
  },
  methods: {
    addToCart() {
      // Logic to add the item to the cart
      console.log(`${this.name} added to cart!`);
    },
  },
});
</script>

<style>
.food-item {
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>

ログイン後にコピー

ステップ 3: コンポーネントの使用

次に、Fooddelivery コンポーネントと FoodItem コンポーネントを使用する親コンポーネントにすべてをまとめてみましょう。

説明させてください

Fooddelivery コンポーネント: このコンポーネントは、フードデリバリーサービスのレイアウトとして機能します。ヘッダー、食品アイテムのデフォルトスロット、フッターの 3 つのスロットを受け入れます。
FoodItem コンポーネント: これは個々の食品を表します。これは名前と価格を小道具として受け取り、カートへの商品の追加をシミュレートするメソッドを備えています。

アプリコンポーネント: これは、すべてがまとめられる親コンポーネントです。 Fooddelivery コンポーネントを使用し、ウェルカムメッセージ、FoodItemcomponents のリスト、およびありがとうメッセージをスロットに埋めます。

使用例

リストのカスタマイズ: スコープ付きスロットは、各アイテムがそのプロパティに基づいて個別のレンダリングロジックを持つことができるリストコンポーネントの作成に最適です。子コンポーネントは項目データをスロットに渡すことができ、親コンポーネントはスコープ付きスロットを使用して各項目のテンプレートを定義できます。 (BasePaginated.vue)
条件付きレンダリング: スコープ付きスロットにより、スロットに提供されるデータに基づいて子コンポーネント内で選択的なレンダリングが可能になります。たとえば、スロットのコンテンツ内にメッセージやエラー状態を条件付きで表示できます。
複雑なレイアウト: スコープ付きスロットを使用すると、親コンポーネントによってレイアウトのさまざまな部分をカスタマイズできる一方で、子コンポーネントがスコープを使用して特定のコンテンツや機能を挿入できるようにする、より複雑なレイアウトの作成が容易になります。

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

ログイン後にコピー

<MyComponent>
  <p>This is some content passed to the default slot!</p>
</MyComponent>

ログイン後にコピー

高度な考慮事項

名前付きスコープ付きスロット: スコープ付きスロット (例: ...) に名前を割り当てることができ、単一の子コンポーネント内に複数のスコープ付きスロットを持ち、親コンポーネント内でそれらを名前で参照できるようになります。
スロット関数: Vue 2 では、スロットは子コンポーネント内の $slots としてアクセスされました。 Vue 3 は、スロットのコンテンツへのアクセスを提供する関数である $scopedSlots を使用した、より反応的なアプローチを提供します。これにより、子コンポーネント内での動的なスロット操作と条件付きレンダリングが可能になります。

スコープ付きスロットの例を拡張して、より明確で機能的なものにしてみましょう。この例では、スコープ付きスロットを使用して項目データを子コンポーネントから親コンポーネントに渡し、柔軟なレンダリングを可能にする方法を示します。

ステップ 1:ItemList コンポーネントを作成する

このコンポーネントは項目のリストを表示し、スコープ付きスロットを使用して、親が各項目のレンダリング方法をカスタマイズできるようにします。

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'LayoutComponent',
});
</script>

ログイン後にコピー

ステップ 2: スコープ付きスロットでの ItemList コンポーネントの使用

次に、ItemList コンポーネントを使用し、スコープ付きスロットを使用して各項目をレンダリングするためのカスタムテンプレートを提供する親コンポーネントを作成しましょう。

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
});
</script>

ログイン後にコピー

アイテムリストコンポーネント:

このコンポーネントは項目のリストを定義し、スコープ付きスロットを使用して各項目を親コンポーネントに公開します。
スロットが指定されていない場合、デフォルトでアイテムの説明が表示されます。 ###親コンポーネント:
このコンポーネントは、ItemList を使用し、各アイテムをレンダリングするためのカスタムテンプレートを提供します。
スコープ付きスロットを介してアイテムデータにアクセスし、クリックすると機能をトリガーするボタンが含まれています。

この例では、Vue 3 のスコープ付きスロットを効果的に使用して、柔軟で再利用可能なコンポーネント構造を作成する方法を示します。親コンポーネントは、子コンポーネントによって提供されるデータにアクセスしながら、各項目のレンダリングをカスタマイズできます。

要約しましょう

この例は、Vue 3 アプリケーションのスロットを利用して柔軟なフードデリバリーコンポーネントシステムを作成する方法を示しています。メインコンポーネントを変更せずに、ヘッダー、フッター、コンテンツを簡単にカスタマイズできます。さらにご質問がある場合、または詳細が必要な場合は、お気軽にコメントでお問い合わせください。

Composition API を使用して Vue 3 の通常のスロットとスコープ指定されたスロットを効果的に活用することで、再利用性とカスタマイズ性の高い UI コンポーネントを構築し、Vue アプリケーションの保守性とコードの編成を促進できます。特定のコンテンツインジェクションと動的レンダリングの要件に基づいて、適切なスロットタイプを選択できます。
成長する方法はつながることです。
コーディングを楽しんでください!

以上がVue ith コンポジション API のスロットを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。