Lzh on GitHub

插槽

将其 props 合并到其直接子元素上。
问题 这个组件与 Vue 原生插槽 有什么不同？答：最大的不同在于它如何处理分配给它的 attributes。

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

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

示例

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

<!-- 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。

<!-- 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>