组件组合
使用 asChild 属性，将 Reka 的功能组合到其他元素类型或您自己的 Vue 组件中。
所有渲染 DOM 元素的 Reka UI 部件都接受一个 asChild 属性。当 asChild 设置为 true 时，Reka UI 将不会渲染默认的 DOM 元素，而是将实现其功能所需的属性和行为传递给插槽的第一个子元素。
更改元素类型
在大多数情况下，您不需要修改元素类型，因为 Reka 经过设计已提供了最合适的默认值。然而，在某些情况下进行修改是有益的。
一个很好的例子是 TooltipTrigger。默认情况下，该部件渲染为 button，但您可能也想为链接（a 标签）添加工具提示。让我们看看如何使用 asChild 实现这一点：
vue
<script setup lang="ts">
import { TooltipRoot, TooltipTrigger, TooltipPortal } from "reka-ui";
</script>
<template>
<TooltipRoot>
<TooltipTrigger asChild>
<a href="https://reka-ui.com/">Reka UI</a>
</TooltipTrigger>
<TooltipPortal>…</TooltipPortal>
</TooltipRoot>
</template>warning
如果您决定更改底层元素类型，您有责任确保其保持可访问性和功能性。例如，对于 TooltipTrigger，它必须是一个可聚焦的元素，能够响应指针和键盘事件。如果将其更改为 div，它将不再可访问。
实际上，您很少会像上面那样修改底层 DOM 元素。更常见的做法是使用您自己的 Vue 组件。对于大多数 Trigger 部件尤其如此，因为您通常希望将功能与设计系统中的自定义按钮和链接组合在一起。
与您自己的 Vue 组件组合
这与上面的操作完全相同，您将 asChild 传递给部件，然后用它包装您自己的组件。 然而，需要注意一些注意事项。
组合多个基元
asChild 可以根据需要深度使用。这意味着它是将多个基元的行为组合在一起的好方法。 以下是如何将 TooltipTrigger 和 DialogTrigger 与您自己的按钮组合在一起的示例：
vue
<script setup lang="ts">
import { TooltipRoot, TooltipTrigger, TooltipPortal, DialogRoot, DialogTrigger, DialogPortal } from "reka-ui";
import MyButton from from "@/components/MyButton.vue"
</script>
<template>
<DialogRoot>
<TooltipRoot>
<TooltipTrigger asChild>
<DialogTrigger asChild>
<MyButton>打开对话框</MyButton>
</DialogTrigger>
</TooltipTrigger>
<TooltipPortal>…</TooltipPortal>
</TooltipRoot>
<DialogPortal>...</DialogPortal>
</DialogRoot>
</template>