Slot

将其属性合并到直接子元素上。

问题

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

答：最大的区别在于它处理分配给它的 attributes 的方式。

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

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

示例

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

vue

<!-- 原生插槽 -->
<!-- Comp.vue -->
<template>
  <slot id="reka-01">
    ...
  </slot>
</template>

<!-- 父模板 -->
<template>
  <Comp v-slot="slotProps">
    <button :id="slotProps.id">...<button>
  <Comp>
<template>

（您可以查看 Vue SFC Playground 并看到 id 没有被继承。）

如果您希望确保某些属性被传递到特定元素（可能是出于无障碍访问的原因），这会很麻烦。

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

vue

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

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

<!-- 父模板 -->
<template>
  <Comp>
    <!-- id 将被继承 -->
    <button>...<button>
  <Comp>
<template>

Slot ​

示例 ​

Slot

示例