如何在 Vue3 的 setup 中使用 $refs

借助 ref() 函数

用elementUI时，需要form表单验证，文档给的是 this.$refs[formName]，但是在vue3中没有this,

 

通过 ref 函数，依然可以实现类似 this.$refs 的功能。

首先在 setup 中定义一个 Ref 变量

import {ref, reactive ,onMounted} from "vue";  setup() { const divRef = ref(null) onMounted(() => { console.log(divRef.value) }) return { divRef } } 

比如表单重置时，就可以使用

divRef .value.resetFields();

然后将这个 divRef 变量挂载到 DOM 上

<template> <div ref="divRef" /> </template> 

这样当 onMount 钩子被触发的时候，div 的 DOM 会在控制台打印出来。

另外 ref 也能实现动态关联，具体实现可以参考文章 《$refs and the Vue 3 Composition API》