説明

Vue.jsにおけるスロット（slot）は、コンポーネント間でコンテンツを分配するための仕組みです。スロットを使用することで、親コンポーネントで特定の内容を子コンポーネントに挿入することができます。これにより、コンポーネントの柔軟性と再利用性を大幅に向上させることができます。

例

親コンポーネントでは、<slot> 要素を使用してスロットを定義します。例えば:

<template>
  <div>
    <h1>親コンポーネント</h1>
    <slot></slot>
  </div>
</template>

上記の例では、<slot></slot> はデフォルトスロットを表しており、子コンポーネントの内容によって親コンポーネント内の任意の位置に置き換えられます。

子コンポーネントでは、<template> 要素の slot 属性を使用して、子コンポーネントの内容を挿入する位置を指定します。例えば:

<template>
  <div>
    <h2>子コンポーネント</h2>
    <slot></slot>
  </div>
</template>

親コンポーネントを使用する際には、そのタグ内に子コンポーネントの内容を配置することができます。この内容は親コンポーネントのスロットに挿入されます。例えば:

<template>
  <div>
    <parent-component>
      <p>これは子コンポーネントの内容です。</p>
    </parent-component>
  </div>
</template>

上記の例では、<p>これは子コンポーネントの内容です。</p> が親コンポーネントの <slot></slot> を置き換えます。最終的なレンダリング結果は次のようになります:

<div>
  <h1>親コンポーネント</h1>
  <div>
    <h2>子コンポーネント</h2>
    <p>これは子コンポーネントの内容です。</p>
  </div>
</div>

デフォルトスロット以外にも、名前付きスロットを定義することもできます。これにより、異なるスロットを使用してコンテンツを分配することができます。スロットには name 属性を使用して名前を付けることができます。

スロットを使用することで、Vue.jsではコンポーネントの階層構造でコンテンツを渡すことが容易になり、より柔軟性のある再利用可能