Vue.js v2のslotの使い方

2021年4月11日Vue.js

Vue.jsのslotの使い方をまとめました。

slotの基本的な使い方

親コンポーネントApp.vue

親コンポーネントのtemplateタグの中に次のように記述します。

<template>
  <div v-if="showModal">
    <!-- Modal.vueにslotでコンポーネントを渡します -->
    <!-- <Modal theme="sale" @close="toggleModal" /> -->
    <Modal theme="sale" @close="toggleModal">
      <h1>タイトル</h1>
      <p>サブタイトル</p>
    </Modal>
  </div>
</template>

まずカスタムコンポーネントであるModalの開始タグと閉じタグを作成します。
このカスタムコンポーネントの中にあるものが、slotに渡されます。

子コンポーネントModal.vue

<template>
  <div class="backdrop" @click.self="closeModal">
    <div class="modal" :class="{ sale: theme === 'sale'}">
      <slot>デフォルト値</slot>
    </div>
  </div>
</template>

このslotの中にカスタムコンポーネントの内容が出力されます。

また、App.vueで何も出力しない場合にのみ、Modal.vueのslotタグの中で記述したものがデフォルト値として出力されます。

名前付きスロット(named slot)の使い方

上のデフォルトのslotはslotのタグを用意すると自動的に出力されますが、名前付きスロットは明示しないと出力されません。

親コンポーネントApp.vue

templateタグを用意して、そこにv-slot:として好きな名前を付けます。

<template>
  <div v-if="showModal">
    <Modal theme="sale" @close="toggleModal">
      <!-- v-slot:として好きな名前を付けます。 -->
      <template v-slot:links>
        <a href="#">サインイン</a>
        <a href="#">もっと詳しく</a>
      </template>
      <h1>タイトル</h1>
      <p>サブタイトル</p>
    </Modal>
  </div>
  <button @click.shift="toggleModal">Open Modal(shift)</button>
  <hr />
  <input type="text" ref="name" />
  <button @click="handleClick">click me</button>
</template>

そして、slotにname属性を付与して、付けた名前とリンクさせます。

子コンポーネントModal.vue

<template>
  <div class="backdrop" @click.self="closeModal">
    <div class="modal" :class="{ sale: theme === 'sale'}">
      <div class="actions">
        <slot name="links"></slot>
      </div>
    </div>
  </div>
</template>