Reka UI 徽标Reka
backdrop
示例
实用工具

插槽

将其 props 合并到其直接子元素上。
问题

此组件与 Vue 原生插槽有何不同？

答：最大的不同在于它如何处理分配给它的 attributes（属性）。

原生插槽将任何绑定的值视为 作用域插槽（Scoped Slots），其中的值将暴露给父模板并被消费。

但 Reka UI 的插槽行为不同，它会将所有分配的属性合并到其直接子元素上。

示例

假设我们想为任何渲染的组件/元素分配一个 id 属性，但原生插槽会将其转换为作用域插槽，你需要手动分配该 id。

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

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

（你可以查看 Vue SFC Playground，并会发现 id 并未被继承。）

如果你想确保某些属性被传递到特定元素上（可能出于可访问性原因），这会很麻烦。

或者，如果你使用 Reka UI 的 Slot 组件，分配给 Slot 组件的属性将由直接子元素继承，但你将无法再访问 作用域插槽（Scoped Slot）。

Vue
<!-- Reka UI Slot -->
<script setup lang="ts">
import { Slot } from 'reka-ui'
</script>

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

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