useCurrentElement

カテゴリ

コンポーネント

エクスポートサイズ

355 B

最終変更日

先週

現在のコンポーネントのDOM要素をrefとして取得します。

デモ

ソース

コンソールログで要素を確認してください。

使用方法

TypeScript

import { useCurrentElement } from '@vueuse/core'

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

または、特定のVueコンポーネントを渡します。

Vue

<script setup>
import { useCurrentElement } from '@vueuse/core'
import { ref } from 'vue'

const componentRef = ref()

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

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

情報

内部でcomputedWithControlを使用しているため、Vue 3でのみ動作します。

注意点

この関数は内部で$elを使用しています。

コンポーネントがマウントされるまでは、refの値はundefinedになります。

単一のルート要素を持つコンポーネントの場合、その要素を指します。
テキストルートを持つコンポーネントの場合、テキストノードを指します。
複数のルートノードを持つコンポーネントの場合、VueがDOM内のコンポーネントの位置を追跡するために使用するプレースホルダーDOMノードになります。

**単一のルート要素を持つコンポーネント**にのみこの関数を使用することをお勧めします。

型定義

TypeScript

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>