Vue3form表单通过ref获取dom

在vue2.x中可以给元素加上ref='xxx'属性，然后在代码中通过this.$refs.xxx获取对应的元素。但是，在vue3中并没有$refs这个东西，所以在vue3中，不能像vue2的方式通过ref属性获取元素。Vue3需要使用生命周期的方法。原因很简单。执行设置时，模板中的元素还没有挂载到页面上。On，所以元素必须在mounted之后获取。如上代码所示，在vue3中，所有的生命周期方法都是提取出来，需要的时候直接导入。这里导入了一个onMounted。接口挂载时会自动执行onMounted回调函数，可以在里面获取dom元素。用过elementUI的都知道，当我们需要表单验证时，vue2的写法是在点击事件中传递ref绑定的名称，通过this.$refs[formName]获取dom元素，如下：)=>{if(valid){alert('submit!');}else{console.log('errorsubmit!!');returnfalse;}});},那么如何不写this.$refs这在vue3中？如下：:rules="[{required:true,message:'标签名称不能为空',trigger:'blur'},{validator:validatePass,trigger:'blur'}]">Saveconst{proxy}=getCurrentInstance();conststate=reactive({addForm:{newTag:'',},});//在setup函数中，可以使用ref函数，用于创建响应式数据，当数据发生变化时，Vue会自动更新UIconstaddFormRef=ref(null);constsubmitForm=()=>{addFormRef.value.validate().then(()=>{console.log('验证成功');}).catch(()=>{console.log('验证失败');});};