vue3中如何通过ref获取元素节点

# Vue3中如何通过ref获取元素节点 在Vue3中，可以通过配合使用 `ref` 和 `setup` 来获取元素节点。ref提供了一种简洁的方法来获取元素和组件实例。在 Vue3 的组件实例上，代表着“临时的组件注册”或“获取原生/第三方组件和 DOM 元素”。 ## 1. 在单个元素上使用ref 在Vue3中，可以在需要获取的DOM元素上添加ref属性，然后在 `setup` 方法内使用`ref()`方法来获取对应的DOM元素节点。 ```html ``` 以上面的示例为例，我们可以在需要获取的元素上添加ref属性，将其绑定到变量 `inputRef` 上。在 `handleClick` 方法内，我们可以通过 `inputRef.value` 获取到该元素节点，从而获取其值，并进行后续操作。 ## 2. 在组件内使用ref 在Vue3中，不仅可以在DOM元素上使用ref属性，同样也可以在自定义组件上使用。 ```html ``` 在上面的示例中，我们在子组件上添加了 `ref` 属性，并将其绑定到变量 `childRef` 上。在 `handleClick` 方法内，我们可以获取子组件的根元素节点 `$el`。 ## 3. 在循环中使用ref Vue3中，我们也可以在循环中使用 `ref` 来获取动态生成的元素节点。 ```html ``` 在上面的示例中，我们动态生成了一组 `span` 元素，并在其中添加了 `ref` 属性，将其绑定到变量 `spanRef` 上。在 `handleClick` 方法内，我们可以通过 `spanRef.value[index]` 访问到每个文字节点，并进行相应的操作。 ## 4. 总结 通过以上三个示例，我们可以清楚地了解到在Vue3中是如何通过 `ref` 获取元素节点的。我们可以通过各种不同的方式来使用 `ref`，从而获取到我们需要的元素或组件实例。需要注意的是，在 `setup` 中使用 `ref` 时，需要使用 `return` 将所需变量、函数等返回，以便在模板中使用。