Vue3+ts （nuxt3）使用ref获取dom元素（单个、多个）

最新推荐文章于 2025-02-16 23:39:25 发布

l煎饼果子

最新推荐文章于 2025-02-16 23:39:25 发布

阅读量2.1k

点赞数 1

分类专栏： Vue3.js 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_64130892/article/details/131610470

版权

Vue3.js 专栏收录该内容

5 篇文章

订阅专栏

文章介绍了在Vue模板中使用ref和watch进行元素引用和数据监听的方法。通过ref可以获取单个或多个元素，并在组件挂载后自动放入数组中。同时，使用watch配合deep选项可以监控ref数组的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接用字符串的形式即可，不管是多个还是单个，多个会自动放到一个数组里面，而且还能被watch监视。

注意需要在挂载后才能拿到这些数据。

<template>
    <div ref="out">
        <div class="item" v-for="k in xxxx" :key="i" ref="itemRefs">{{ k }}</div>
    </div>
</template>
<script setup lang='ts'>
/**单个ref */
const out = ref<Element | null>(null)
/**ref数组 */
const itemRefs = ref<Element[]>([])
watch(itemRefs, (newVal) => {
    console.log('ref数组更新啦', newVal);
}, { deep: true })
onMounted(() => {
    console.log(out.value ,itemRefs.value);
})
</script>