vue3中使用ref获取dom的操作代码

在Vue 3中，你可以使用ref来获取DOM元素的引用。ref是一个响应式且可重用的引用对象，它允许你访问Vue组件中的DOM元素。以下是如何在Vue 3中使用ref获取DOM元素的基本步骤：

1. 定义一个ref： 在组件的setup()函数中定义一个ref，使用Vue的ref()函数。

2. 在模板中使用ref： 在模板中，使用ref属性将DOM元素与定义的ref关联起来。

3. 访问ref： 在组件的逻辑中，你可以访问这个ref来获取DOM元素。

下面是一个简单的示例：

 

<template> <div> <input type="text" ref="myInput" /> <button @click="focusInput">Focus Input</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { // 定义一个ref const myInputRef = ref(null); // 访问DOM元素的方法 const focusInput = () => { // 使用.value访问DOM元素 if (myInputRef.value) { myInputRef.value.focus(); } }; // 返回ref以便在模板中使用 return { myInputRef, focusInput, }; }, }; </script>

在这个示例中，我们定义了一个ref叫做myInputRef，它被用来获取模板中的<input>元素。我们还定义了一个focusInput方法，当按钮被点击时，这个方法会被调用，并且使用myInputRef.value来获取DOM元素并调用它的focus()方法。

请注意，ref在Vue 3中是首选的方式来访问DOM元素，因为它是响应式的，并且与Vue的组合式API紧密集成。如果你需要在组件的生命周期钩子中访问DOM元素，你可以在onMounted或onUpdated等钩子中访问ref。