useCurrentElement

类别

Component

导出体积

365 B

上次更改

9 months ago

将当前组件的 DOM 元素作为 ref 返回。

示例

源码 playground (beta)

打开console.log查看元素

用法

import { useCurrentElement
 } from '@vueuse/core'

const el
 = useCurrentElement
() // ComputedRef<Element>

或者传递一个特定的 Vue 组件

vue

<script setup lang="ts">
import { useCurrentElement
, VueInstance
 } from '@vueuse/core'
import { shallowRef
 } from 'vue'

const componentRef
 = shallowRef
<VueInstance
>(null as unknown as VueInstance
)

const el
 = useCurrentElement
(componentRef
) // ComputedRef<Element>
</script>

<template>
  <div
>
    <OtherVueComponent ref
="componentRef
" />
    <p
>Hello world</p
>
  </div
>
</template>

注意事项

此函数在底层使用 $el。

在组件挂载之前，ref 的值将为 undefined。

对于具有单个根元素的组件，它将指向该元素。
对于具有文本根的组件，它将指向文本节点。
对于具有多个根节点的组件，它将是 Vue 用于跟踪组件在 DOM 中位置的占位符 DOM 节点。

建议仅对具有单个根元素的组件使用此函数。

类型声明

export declare function useCurrentElement
<
  T
 extends MaybeElement
 = MaybeElement
,
  R
 extends VueInstance
 = VueInstance
,
  E
 extends MaybeElement
 = MaybeElement
 extends T

    ? IsAny
<R
["$el"]> extends false
      ? R
["$el"]
      : T

    : T
,
>(rootComponent
?: MaybeElementRef
<R
>): ComputedRefWithControl
<E
>