Vue3 获取DOM元素总结

文章目录Vue3 获取DOM元素总结获取单个DOM获取多个DOM获取子组件的DOM方式一defineExpose方式二$elVue3 获取DOM元素总结获取单个DOMscript 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 refboxRef/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-foritem in list :keyitem.id :refsetItemRef {{ 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 refboxRef 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 refchildRef/ /template方式二$el可以通过 $el 获取组件的根DOMscript 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 refchildRef/ /template