Vue3 スロット <slot>
Vue3 オプション APIVue3 では、スロット（slot）は親コンポーネントから子コンポーネントにコンテンツを渡すためのメカニズムです。スロットは子コンポーネント内に予約された「プレースホルダー」と考えることができ、親コンポーネントはこれらのプレースホルダーに任意のコンテンツを挿入できます。これにより、子コンポーネントは自身の構造を変更することなく、親コンポーネントから渡されたコンテンツを柔軟に表示できます。
スロットの基本用法
デフォルトスロット
デフォルトスロットは最も簡単なスロットタイプです。子コンポーネントでは、次を使用できます。<slot>タグを使用してデフォルトスロットを定義します。親コンポーネントは子コンポーネントを使用する際、このスロットにコンテンツを挿入できます。
例
<template>
<div class="child">
<h3>これは子コンポーネントのタイトルです</h3>
<slot>デフォルトコンテンツ</slot>
</div>
</template>
例
<template>
<ChildComponent>
<p>これは親コンポーネントから渡されたコンテンツです</p>
</ChildComponent>
</template>
親コンポーネントでは、<ChildComponent>タグ内にコンテンツを挿入できます。このコンテンツは子コンポーネント内の<slot>タグを置き換えます。親コンポーネントがコンテンツを渡さない場合、子コンポーネントは<slot>タグ内のデフォルトコンテンツを表示します。
名前付きスロット
名前付きスロットを使用すると、子コンポーネントに複数のスロットを定義し、名前で区別できます。親コンポーネントでは、次のものを使用できます。v-slotディレクティブを使用して、どのスロットに挿入するかを指定します。
例
<template>
<div class="child">
<header>
<slot name="header">デフォルトのヘッダーコンテンツ</slot>
</header>
<main>
<slot>デフォルトのメインコンテンツ</slot>
</main>
<footer>
<slot name="footer">デフォルトのフッターコンテンツ</slot>
</footer>
</div>
</template>
例
<template>
<ChildComponent>
<template v-slot:header>
<h1>カスタムヘッダーコンテンツ</h1>
</template>
<p>これは親コンポーネントから渡されたメインコンテンツです</p>
<template v-slot:footer>
<p>カスタムフッターコンテンツ</p>
</template>
</ChildComponent>
</template>
上記の例では、3つのスロットを定義しました：header、main（デフォルトスロット）とfooter。親コンポーネントはv-slotディレクティブを使用して、対応するスロットにコンテンツを挿入します。
スコープ付きスロット
スコープ付きスロットは、子コンポーネントが親コンポーネントにデータを渡すことを可能にし、親コンポーネントはこのデータに基づいてコンテンツをレンダリングできます。これは、子コンポーネントの内部レンダリングロジックをカスタマイズする必要がある場合に非常に便利です。
基本用法
子コンポーネントでは、v-bindを使用してスロットにデータを渡します。親コンポーネントは、v-slotディレクティブを使用してこのデータを受け取ります。
例
<template>
<div class="child">
<slot :user="user"></slot>
</div>
</template>
<script>
export default {
data() {
return {
user: { name: 'Alice', age: 25 }
};
}
};
</script>
例
<template>
<ChildComponent v-slot="{ user }">
<p>ユーザー名：{{ user.name }}</p>
<p>ユーザー年齢：{{ user.age }}</p>
</ChildComponent>
</template>
この例では、子コンポーネントはv-bind 将 userオブジェクトをスロットに渡します。親コンポーネントは、v-slot="{ user }"このオブジェクトを受け取り、userのデータに基づいてコンテンツをレンダリングします。
その他の拡張