一、Vue3-Ref获取DOM介绍
Vue.js是一种使用现代化思想构建的渐进式JS框架，因其对数据和DOM双向绑定的能力，被广泛用于创建Web应用程序。在开发过程中，Vue.js提供了非常简单的方法来操作DOM元素。基于Vue.js3.0的Composition API，我们可以使用ref来访问组件的DOM元素。
二、获取DOM的基础方法
我们通过引入Vue的Composition API模块，就可以使用ref这个函数来访问组件的DOM元素。为了在组件中使用ref，我们需要在组件的setup方法中调用ref，如下所示：
setup() {
const myRef = ref(null)
return { myRef }
}
在这个例子中，我们创建了一个名为“myRef”的变量，并将其初始化为null。当在模板中使用MyRef时，我们可以使用“ref=”绑定到DOM元素。
< template > < div ref="myRef" >This is my reference< /div > < /template >
该代码片段会将
元素绑定到我们在setup函数中创建的ref变量“myRef”上。现在，我们可以在组件中使用myRef，如下所示：
setup() { const elements = ref({}); onMounted(() => { console.log(elements.value.el1); console.log(elements.value.el2); console.log(elements.value.el3); }); return { elements }; }
setup() {
const myRef = ref(null)
return {
myRef,
showRef() {
console.log(myRef.value)
}
}
}
三、使用Ref的高级方法
尽管ref在Vue.js的基础中是一个非常有用的工具，但是它还有更多高级功能可以提供。
1.在组件之外的访问ref
当使用ref时，我们可以像访问普通变量一样，从组件的外部访问它的值。这可以通过挂载/ref对象的$属性来实现。
import { ref } from 'vue';
const myRef = ref(null)
setTimeout(() => {
console.log(myRef.value)
}, 1000)
2.使用refs数组
除了使用单个ref之外，您还可以使用refs数组来引用多个元素。这可以通过在模板中使用v-for指令来实现。以下是一个使用refs数组的示例：
< template >
< div v-for="i in 3" :key="i" :ref="'el'+ i">El #{{ i }}
3.使用带有ref的子组件
使用带有ref的子组件，可以更好地控制子组件中的元素。在子组件中使用ref与在父组件中使用ref非常相似，但使用ref绑定到子组件上不会返回整个组件对象，而是返回子组件渲染的根元素。如下所示：
// Child component
< template >
< div ref="childRef" >This is my child reference.< /div >
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'ChildComponent',
setup() {
const childRef = ref(null);
return { childRef };
},
});
</script>
// Parent component
< template >
< ChildComponent ref="childRef" />
<script>
import ChildComponent from './ChildComponent.vue';
export default {
name: 'ParentComponent',
components: { ChildComponent },
setup() {
const childRef = ref(null);
const handleClick = () => {
console.log(childRef.value.$refs.childRef);
};
return { childRef, handleClick };
},
};
</script>
四、结论
使用ref，我们可以轻松地访问组件中的DOM元素，从而使我们可以更好地控制应用程序的行为。ref是访问DOM元素的标准Vue.js函数，具有许多高级用途。在组件之外可以从ref访问值，使用ref数组可以引用多个元素，使用带有ref的子组件可以更好地控制子组件中的内容。
