Lzh on GitHub

组合

使用 asChild prop 将 Reka 的功能组合到其他元素类型或您自己的 Vue 组件上。

所有渲染 DOM 元素的 Reka UI 部件都接受 asChild prop。当 asChild 设置为 true 时，Reka UI 不会渲染默认的 DOM 元素，而是将使其功能所需的 props 和行为传递给插槽的第一个子元素。

更改元素类型

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

一个很好的例子是 TooltipTrigger。默认情况下，此部件被渲染为 button，但您可能还想为链接（a 标签）添加工具提示。让我们看看如何使用 asChild 实现此功能：

<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>
如果您确实决定更改底层元素类型，则您有责任确保其保持可访问和功能正常。例如，对于 TooltipTrigger，它必须是可聚焦的元素，并且能够响应指针和键盘事件。如果您将其切换到 div，它将不再可访问。

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

与您自己的 Vue 组件组合

这与上面完全相同，您将 asChild 传递给部件，然后用它包裹您自己的组件。但是，需要注意一些注意事项。

组合多个 primitives

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

<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>Open dialog</MyButton>
        </DialogTrigger>
      </TooltipTrigger>
      <TooltipPortal>…</TooltipPortal>
    </TooltipRoot>
    
    <DialogPortal>...</DialogPortal>
  </DialogRoot>
</template>
属性和控制的链式传递

实际上，asChild 属性在这里创建了一个链式传递：
  • TooltipTrigger 说：“不要渲染我，把我的属性传递给我的子组件。”
  • 它的子组件是 DialogTrigger。所以，TooltipTrigger 的属性被合并到 DialogTrigger 上。
  • DialogTrigger 也说：“不要渲染我，把我的属性传递给我的子组件。”
  • 它的子组件是 MyButton。所以，DialogTrigger（此时它已经继承了 TooltipTrigger 的合并属性）会将所有这些组合后的属性传递给 MyButton。