插槽

将它的 props 合并到它的直接子元素上。

问题

这个组件与 Vue 原生插槽 有什么不同？

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

原生插槽将任何绑定值视为 作用域插槽，其中值将暴露给父级模板并被使用。

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

示例

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

<!-- 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，分配给 Slot 组件的属性将被直接子元素继承，但你将不再能够访问 Scoped Slot。

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