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

v-slotとは

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

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

この記事を書いた人

@takasqr アプリケーション開発が大好きなエンジニア。Vue、Swift、Electrom などでアプリを作って公開している。AWS や Firebase などのクラウドサービスも好き。

使い方

名前付きスロット

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です。