Vue3でScoped Slotsを使う

2025/02/20 16:25:03

はじめて使ったので備忘録メモ。

Svelte4ではlet:fooって書けるアレ、Vue3ではどうやるんやっけ？ってなったので。

Vue3では

さて、本題のVue3でのやり方。

Slots | Vue.js https://vuejs.org/guide/components/slots.html#scoped-slots

まず、使う側のコンポーネント。

<Switcher v-slot="{ caseName }">
  <template v-if="caseName === 'A'">case: A</template>
  <template v-if="caseName === 'B'">case: B</template>
  <template v-if="caseName === 'default'">default!</template>
</Switcher>

v-slotで任意の値を受け取れるので、それをいつも通りに使えば良い。

対して、Switcherコンポーネントの実装はこのように。

<script setup lang="ts">
import { ref } from 'vue'

defineSlots<{
  default(props: { caseName: string }): unknown;
}>()

const caseName = ref("default");

// if (...) caseName.value = "A";
</script>

<template>
  <div>
    <slot :caseName="caseName" />
  </div>
</template>

APIを呼ぶなりなんなり好きにして、caseNameを更新すればいいってわけ。

TSの場合、defineSlots()で型を付けるのも忘れない。

Svelte5では

ちなみにSvelte5になると、#snippetと@renderに置き換えられるので、let:fooの役目は終わるらしい。

Svelte 5 migration guide • Docs • Svelte https://svelte.dev/docs/svelte/v5-migration-guide#Snippets-instead-of-slots-Passing-data-back-up