スロット

プロパティを直接の子にマージします。

質問

このコンポーネントはVue ネイティブスロットとどう違いますか？

A: 最大の違いは、割り当てられた attributes の処理方法です。

ネイティブスロットは、バインドされた値をスコープ付きスロットとして扱います。値は親テンプレートに公開され、使用されます。

しかし、Radix Vue のスロットの動作は異なり、割り当てられたすべての属性を直接の子にマージします。

例

レンダリングされたコンポーネント/要素に id 属性を割り当てたいとします。しかし、ネイティブスロットはそれをスコープ付きスロットに変換するため、手動で ID を割り当てる必要があります。

vue

<!-- Native Slot -->
<!-- Comp.vue -->
<template>
  <slot id="radix-01">
    ...
  </slot>
</template>

<!-- parent template -->
<template>
  <Comp v-slot="slotProps">
    <button :id="slotProps.id">...<button>
  <Comp>
<template>

(Vue SFC Playground を確認して、id が継承されていないことを確認できます。)

アクセシビリティの理由など、特定の要素に一部の属性が確実に渡されるようにしたい場合、これは面倒です。

代わりに、Radix Vue の Slot を使用すると、スロットコンポーネントに割り当てられた属性は直接の子要素によって継承されますが、スコープ付きスロットにはアクセスできなくなります。

vue

<!-- Radix Vue Slot -->
<script setup lang="ts">
import { Slot } from 'radix-vue'
</script>

<!-- Comp.vue -->
<template>
  <Slot id="radix-01">
    ...
  </Slot>
</template>

<!-- parent template -->
<template>
  <Comp>
    <!-- id will be inherited -->
    <button>...<button>
  <Comp>
<template>

スロット ​

例 ​

スロット

例