跳到主要内容

useParentElement

分类
导出大小
467 B
上次更改
8 个月前

获取给定元素的父元素

演示

当前元素标签:正在查找...

父元素标签:正在查找...

用法

当不传递任何参数时,它将返回当前组件的父元素。

vue
<script setup lang="ts">
import { 
useParentElement
} from '@vueuse/core'
const
parentEl
=
useParentElement
()
onMounted
(() => {
console
.
log
(
parentEl
.
value
)
}) </script>

它也可以接受一个 ref 作为第一个参数。

vue
<script setup lang="ts">
import { 
useParentElement
} from '@vueuse/core'
import {
shallowRef
} from 'vue'
const
tooltip
=
shallowRef
<HTMLElement | undefined>()
const
tooltipWrapper
=
useParentElement
(
tooltip
)
onMounted
(() => {
console
.
log
(
tooltipWrapper
.
value
)
}) </script> <template> <
div
>
<
p
ref
="
tooltip
" />
</
div
>
</template>

类型声明

ts
export declare function 
useParentElement
(
element
?:
MaybeRefOrGetter
<HTMLElement | SVGElement | null | undefined>,
):
Readonly
<
ShallowRef
<HTMLElement | SVGElement | null | undefined>>

来源

源代码演示文档

贡献者

Anthony Fu
IlyaL
Anthony Fu
青椒肉丝
Arthur Darkstone
JD Solanki

更新日志

v12.8.0
7432f - feat(types): 废弃 MaybeRefMaybeRefOrGetter,转而使用 Vue 的原生类型 (#4636)
v12.3.0
59f75 - feat(toValue): 废弃 @vueuse/shared 中的 toValue,转而使用 Vue 的原生函数
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)

根据 MIT 许可证发布。