Vue.js スロット入門: コンポーネント間のコンテンツ配布をマスターする方法

Vue.js における「スロット」は、コンポーネント間でコンテンツを配布するための強力な機能です。これにより、親コンポーネントから子コンポーネントへ任意の HTML や他の Vue コンポーネントを挿入することができます。これは、コンポーネントの再利用性と柔軟性を向上させるのに役立ちます。

基本的なスロットの使用方法

1. デフォルトスロット:
   親コンポーネントから子コンポーネントにコンテンツを挿入する最もシンプルな方法です。子コンポーネントのテンプレート内に <slot></slot> タグを配置し、そのタグの間にデフォルトのコンテンツを入れることができます。親コンポーネントで子コンポーネントを使用する際に、<slot> タグの間に挿入された内容が表示されます。 子コンポーネント:

   <template>
     <div>
       <slot>ここにデフォルトコンテンツが表示されます</slot>
     </div>
   </template>

親コンポーネント:

   <template>
     <child-component>
       ここに挿入する内容
     </child-component>
   </template>

2. 名前付きスロット:
   複数のスロットを持つ場合や、特定のスロットに内容を明示的に挿入したい場合に名前付きスロットを使用します。スロットに name 属性を付けることで識別します。 子コンポーネント:

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

親コンポーネント:

   <template>
     <child-component>
       <template v-slot:header>
         ヘッダー部分の内容
       </template>
       <template v-slot:main>
         メイン部分の内容
       </template>
       <template v-slot:footer>
         フッター部分の内容
       </template>
     </child-component>
   </template>

スコープ付きスロット

スコープ付きスロットを使うと、子コンポーネントから親コンポーネントにデータを渡すことができます。これにより、子コンポーネントの内部データを利用して、親コンポーネントで動的にコンテンツをレンダリングすることが可能になります。

子コンポーネント:

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot name="item" :item="item">{{ item.defaultText }}</slot>
    </li>
  </ul>
</template>

親コンポーネント:

<template>
  <child-component>
    <template v-slot:item="slotProps">
      <span>{{ slotProps.item.text }}</span>
    </template>
  </child-component>
</template>

Vue のスロットは非常に柔軟で、コンポーネントの構造を明確に保ちつつ、インターフェースの再利用性とカスタマイズ性を大幅に向上させます。