vue3.0使用ref获取dom元素

1、Vue 2.x获取DOM

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

this.$refs.myRef

2、Vue 3.0获取单个DOM

<template>
  <div ref="myRef">获取单个DOM元素</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myRef = ref(null);

    onMounted(() => {
      console.dir(myRef.value);
    });
    return {
      myRef
    };
  }
};
</script>

3、vue3.0获取到dom元素进行表单校验

<script setup>
import { ref, reactive } from 'vue'

....
// 表单元素
const dom = ref(null)
// 校验规则
const rules = {
  name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
}
// 绑定数据
const form = reactive({
  name: ''
})
// 测试方法
const onSubmit = () => {
  console.log('提交数据', form)
  // 开始校验
  dom.value.validate(valid => {
    console.log('校验结果', valid)
    if (valid) {
    
    	// 表单校验通过，执行对应的操作
    }
  })
}
....

</script>

<template>
  <el-form ref="dom" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">测试</el-button>
    </el-form-item>
  </el-form>
</template>