useCurrentElement

分类

组件

导出大小

365 B

上次更改

10 个月前

获取当前组件的 DOM 元素作为 ref。

演示

源代码演示 (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
>