在学习vueuse
模块的unrefElement
用法前,先来复习下ref
属性在普通html
标签和自定义组件标签上的用法。
看下面的例子:
<script setup>
import JuanButton from '@/components/button'
import { onMounted, ref } from 'vue'
const btn = ref()
const span = ref()
onMounted(() => {
console.log(btn.value)
console.log(span.value)
})
</script>
<template>
<div class="m-8">
<div>
<span ref="span" class="mr-2 inline-block border border-amber-500">我是一个span</span>
<JuanButton ref="btn" type="primary">Hello</JuanButton>
</div>
</div>
</template>
实验发现,ref
作用在普通html
元素上可以通过.value
访问到dom
元素;而对于自定义组件,则是获取组件对象:
要访问组件内部的dom
元素,可以访问btn.value.$el
总结下来要通过ref
来访问html
标签对应的元素,有两种方式:
-
html
原生dom
元素const span = ref() onMounted(() => { console.log(span.value) })
-
自定义组件对应的
dom
const btn = ref() onMounted(() => { console.log(btn.value.$el) })
而vueuse
模块的unrefElement
方法提供了统一的操作方式:
<script setup>
...
import { unrefElement } from '@vueuse/core'
const btn = ref()
const span = ref()
onMounted(() => {
console.log(unrefElement(btn))
console.log(unrefElement(span))
})
</script>