Primitive
将 Reka 的功能组合到其他元素类型或您自己的 Vue 组件上。
当您构建组件时,在某些情况下,您可能希望允许用户将某些功能组合到底层元素或替代元素上。这就是 Primitive 派上用场的地方,因为它向用户公开了此功能。
API 参考
| Prop | 默认值 | 类型 | 说明 |
|---|---|---|---|
as | div | string | Component | 当前元素应渲染为的元素或组件。可以被 asChild 覆盖。 |
asChild | false | boolean | 将默认渲染的元素更改为作为子元素传递的元素,合并它们的 props 和行为。阅读我们的 组合 指南了解更多详情。 |
用法
更改 as 值
如果您想更改默认渲染的元素或组件,可以在定义 props 时设置默认的 as。
<script setup lang="ts">
import type { PrimitiveProps } from 'reka-ui'
import { Primitive } from 'reka-ui'
const props = withDefaults(defineProps<PrimitiveProps>(), {
as: 'span'
})
</script>
<template>
<Primitive v-bind="props">
...
</Primitive>
</template>
渲染 asChild
将默认渲染的元素更改为作为子元素传递的元素,合并它们的 props 和行为。
阅读我们的 组合 指南了解更多详情。