名前つきSlotにHTMLを渡すv-slot
date
Mar 22, 2023
repo_url
slug
vslot-name
status
Published
summary
type
Post
thumbnail_url
tags
vue
outer_link
v-slotディレクティブの引数にHTMLを渡す相手となるSlot名を記述することで、ひとつのコンポーネントの複数の異なるHTMLを挿入できる。
名前のないSlotは
v-slot:default とする。<OneSection v-bind:name="taro">
<template v-slot:default>
<p>問題発生</p>
</template>
<template v-slot:detail>
<ul>
<li v-for="problem in taroProblems" v-bind:key="problem">
{{ problem }}
</li>
</ul>
</template>
</OneSection>省略形
v-slotにも省略形がある。（#をつける）
<template #detail>名前付きSlotの動的設定（Dynamic ）
v-slot名として、テンプレート変数を使うことができる。
<script setup lang="ts">
import { ref } from 'vue';
import OneSection from './components/OneSection.vue';
const taro = ref('田中 太郎');
const slotName = ref('warning');
</script>
<template>
<section>
<OneSection v-bind:name="taro">
<template v-slot:default/>
<template v-slot:[slotName]>
<p>特殊なエラーが発生</p>
</template>
</OneSection>
</section>
</template><script setup lang="ts">
interface Props {
name: string;
}
defineProps<Props>();
</script>
<template>
<section class="box">
<h1>{{ name }}さんの状況</h1>
<slot>
<p>問題ありません。</p>
</slot>
<slot name="warning">
<p>フォールバック</p>
</slot>
</section>
</template>
