vue3中用ref拿到dom元素

实现场景：有多个表单元素组件validate-input，内部可以实现验证功能（即验证表单输入是否满足条件），并且有返回值（true表示满足，false表示不满足），将他们包裹在一个父组件validate-form中，将父组件放在app.vue中，若想在app.vue中拿到父组件中的属性，则需要先获取到该元素节点。

       这就需要在父组件中拿到子组件的dom节点

在vue2中，我们可以通过ref拿到一个元素节点

<div ref="myRef"></div>

this.$refs.myRef

但在vue3中怎么拿到dom元素的呢？

<validate-form @form-submit='onFormSubmit' ref='inputRef'>
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
        <!-- 在该组件中使用一些属性如placeholder(非prop的attribute)，不会在input标签上生效，反而会加到根组件上，即validate-input-container上，
        这时我们需要先使用inheritAttrs:false让这些属性不添加到根元素上去,再借助组件的$attr将属性添加到input上 -->
        <validate-input :rules="emailRule" v-model='emailVal' placeholder='请输入邮箱地址' type='text'></validate-input>
      </div>
       
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">密码</label>
        <validate-input :rules="emailRule" v-model='emailVal' placeholder='请输入密码' type='password'></validate-input>
      </div>
</validate-form>

export default defineComponent({
    setup(){
        const inputRef = ref<any>()

        const onFormSubmit = (result:Boolean)=>{
          console.log('1234',result)
          console.log(inputRef.value)
        }

        return{
            inputRef
        }
    }
}

输出的inputRef.value中包含该组件中的属性与方法

 submitForm是validate-form中的方法。