如何在 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》