组合

使用 `asChild` 道具将 Radix 的功能组合到替代元素类型或您自己的 Vue 组件上。

所有渲染 DOM 元素的 Radix 基元部分都接受一个 asChild 道具。当 asChild 设置为 true 时，Radix Vue 不会渲染默认的 DOM 元素，而是将使它发挥作用的 props 和行为传递给插槽的第一个子元素。

更改元素类型

在大多数情况下，您不需要修改元素类型，因为 Radix 旨在提供最合适的默认值。但是，在某些情况下这样做很有帮助。

一个很好的例子是 TooltipTrigger。默认情况下，此部分被渲染为一个 button，但您可能想将工具提示添加到链接 (a 标记) 中。让我们看看如何使用 asChild 实现这一点。

<script setup lang="ts">
import { TooltipRoot, TooltipTrigger, TooltipPortal } from "radix-vue";
</script>

<template>
  <TooltipRoot>
    <TooltipTrigger asChild>
      <a href="https://vue.radix-ui.com.cn/">Radix Vue</a>
    </TooltipTrigger>
    <TooltipPortal>…</TooltipPortal>
  </TooltipRoot>
</template>

如果您确实决定更改底层元素类型，您有责任确保它保持可访问性和功能性。例如，在 TooltipTrigger 的情况下，它必须是一个可聚焦的元素，能够响应指针和键盘事件。如果您将其更改为 div，它将不再可访问。

实际上，您很少会像上面那样修改底层 DOM 元素。相反，更常见的是使用您自己的 Vue 组件。对于大多数 Trigger 部分尤其如此，因为您通常希望将功能与设计系统中的自定义按钮和链接组合在一起。

与您自己的 Vue 组件组合

这与上面的操作完全相同，您将 asChild 传递给该部分，然后用它包装您自己的组件。但是，有一些需要注意的问题。

组合多个基元

asChild 可以根据您的需要进行深度使用。这意味着它是将多个基元的行为组合在一起的好方法。以下是如何将 TooltipTrigger 和 DialogTrigger 与您自己的按钮组合在一起的示例。

<script setup lang="ts">
import { TooltipRoot, TooltipTrigger, TooltipPortal, DialogRoot, DialogTrigger, DialogPortal } from "radix-vue";
import MyButton from from "@/components/MyButton.vue"
</script>

<template>
  <DialogRoot>
    <TooltipRoot>
      <TooltipTrigger asChild>
        <DialogTrigger asChild>
          <MyButton>Open dialog</MyButton>
        </DialogTrigger>
      </TooltipTrigger>
      <TooltipPortal>…</TooltipPortal>
    </TooltipRoot>

    <DialogPortal>...</DialogPortal>
  </DialogRoot>
</template>