Vue公式のチュートリアル
スロット
これも、コンポーネント関係の話。
props を経由したデータの受け渡しだけでなく、親コンポーネントはテンプレートフラグメントを スロット を経由して子コンポーネントへ渡すこともできます:
親側で呼び出し
<ChildComp>
This is some slot content!
</ChildComp>
子側ではこのように書く。
<!-- in child template -->
<slot/>
slot の中のコンテンツは、親コンポーネントがスロットコンテンツを渡さなかった場合に表示される。
<slot>Fallback content</slot>
stackblitzで書いた。
親側で、<ChildComp></ChildComp> 内に、何も書かない状態だと、
<ChildComp>
</ChildComp>
slot の中のコンテンツが表示される。
親側で、<ChildComp></ChildComp> 内に、何か書いて渡すと、
<script setup>
import { ref } from 'vue';
import ChildComp from './ChildComp.vue';
const msg = ref('from parent');
</script>
<template>
<ChildComp>Message: {{ msg }}</ChildComp>
</template>
<ChildComp></ChildComp>内に書いたものが表示される。
子側で、slot 部分を3つに増やしてみたら、
<template>
<p><slot>Fallback content</slot></p>
<p><slot>Fallback content</slot></p>
<p><slot>Fallback content</slot></p>
</template>
<ChildComp></ChildComp>内に書いたものが、３つ表示される。
