Vue3中获取DOM元素的几种方法
作者：xiangxiongfly915
本文系统总结Vue3中获取DOM元素的三种核心方式：获取单个DOM元素、通过ref函数批量获取多个DOM元素,以及获取子组件DOM的两种途径,需要的朋友可以参考下
获取单个DOM
<script setup>
import {onMounted, ref} from "vue";
const boxRef = ref();
onMounted(() => {
console.log(boxRef.value);
boxRef.value.style.backgroundColor = "red"; // 设置背景色
const myWidth = boxRef.value.clientWidth; // 获取属性
console.log(myWidth);
});
</script>
<template>
<div ref="boxRef"></div>
</template>
<style scoped>
div {
width: 100px;
height: 100px;
margin: 10px;
}
</style>
获取多个DOM
需要给 ref 绑定函数，用于收集所有元素。
<script setup>
import {onMounted, ref} from "vue";
const itemRefs = ref([]);
const list = ref([{id: 1, name: "A"}, {id: 2, name: "B"}, {id: 3, name: "C"}]);
const setItemRef = (el) => {
if (el)
itemRefs.value.push(el);
};
onMounted(() => {
for (const el of itemRefs.value) {
console.log(el.innerText);
}
});
</script>
<template>
<ul>
<li v-for="item in list" :key="item.id" :ref="setItemRef">
{{ item.name }}
</li>
</ul>
</template>
<style scoped>
div {
width: 100px;
height: 100px;
margin: 10px;
}
</style>
获取子组件的DOM
方式一：defineExpose
子组件需要调用 defineExpose 暴露DOM元素。
子组件：
<script setup>
import {ref} from "vue";
const boxRef = ref();
defineExpose({boxRef});
</script>
<template>
<div ref="boxRef">
hello world
</div>
</template>
父组件：
<script setup>
import Child from "@/components/Child.vue";
import {onMounted, ref} from "vue";
const childRef = ref();
onMounted(() => {
const el = childRef.value.boxRef;
console.log(el.innerText);
});
</script>
<template>
<Child ref="childRef"/>
</template>
方式二：$el
可以通过 $el 获取组件的根DOM
<script setup>
import Child from "@/components/Child.vue";
import {onMounted, ref} from "vue";
const childRef = ref();
onMounted(() => {
const el = childRef.value.$el;
console.log(el.innerText);
});
</script>
<template>
<Child ref="childRef"/>
</template>
到此这篇关于Vue3中获取DOM元素的几种方法的文章就介绍到这了,更多相关Vue3获取DOM元素方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！