【Vue3】v-slotとは？使い方を紹介する

v-slotとは

コンポーネントにhtmlなどの表示データを渡す時に便利なslotですが、複数のデータをスロットとして渡したい場合があると思います。

そんな時は、v-slotディレクティブを使って、名前付きスロットを作ると便利です。

使い方

名前付きスロット

v-slotは基本的にtempleteに書く必要があります。または、名前付きではなくデフォルトのスロットを使用してプロパティを受け取る場合はコンポーネントにも書くことができます。

<script>
  import CustomSection from './CustomSection.vue'
  export default {
    components: { CustomSection }
  }
</script>

<template>
  <CustomSection>
    <template v-slot:header>
      <h1>Page Title</h1>
    </template>
    
    <template v-slot:contents>
      <p>Contents...</p>
    </template>
  </CustomSection>
</template>

ちなみにデフォルトの名前はdefaultです。