Vue3Tutorial14

今回は、Vue3のチュートリアルのStep14のslotについてです

Vue.js

Vue.js - The Progressive JavaScript Framework

ja.vuejs.org

Slotとは

スロットは, 親コンポーネントから子コンポーネントにコンテンツを挿入するための機能です。 スロットを経由して、親コンポーネントから子コンポーネントにコンテンツを挿入することができます。

Slotの使い方

Slotは<slot>タグを使うことで、親コンポーネントから子コンポーネントにコンテンツを挿入することができます。

// ChildComponent.vue
<template>
  <slot>Fallback Content</slot> // Fallback Content:親コンポーネントからコンテンツが渡されなかった場合に表示されるデフォルトのコンテンツ
</template>

親コンポーネントで<ChildComponent>タグで囲んだ部分が、<slot>タグに挿入されます。

// App.vue
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const msg = ref("Hello, from parent!")
</script>

<template>
  <ChildComponent>
    {{ msg }}
  </ChildComponent>
</template>

ここまで、Vue3のチュートリアルのStep14のslotについてでした。