Vue3和element plus 中ref用法元素实例操作

在 vue3 中，组件的逻辑可以放在 setup 函数里面，但是 setup 中不再有 this，所以 vue2 中的 this.$refs 的用法在 vue3 中无法使用。

用法是：
element中(注意定义的ref 一定要在return 中加上,在方法中调用才能操作dom实例)
代码：

<template>
 <div>
   <el-input class="editInput"
             ref="editNameRef"
             v-model="name"
             @keyup.enter="inputVal"></el-input>
   </div>
</template>
<script>
import { defineComponent, getCurrentInstance, reactive, toRefs, watch, ref } from 'vue'
export default defineComponent({
 setup (props) {
    const { proxy } = getCurrentInstance()
    const editNameRef = ref(null)
    
    const data = reactive({ 
    	name:''
    })
    
    const inputVal=()=>{
    console.log(editNameRef.value)
	}
	
    return {
      ...toRefs(data),
      editNameRef,
      inputVal
    }
})
</script>

2、简单的用法给元素添加 ref 属性。
在 setup 中声明proxy变量。
在 onMounted 生命周期中访问 ref 属性，既是元素实例。
如果操作DOM多的话也可以用上面写的方法。
代码

<p class="slogan" ref="sloan">「让创意动起来 世界在你手中」</p>

const { proxy } = getCurrentInstance()
onMounted(() => {
      console.log(proxy.$refs.slogan)
      //设置字体颜色为红色
       proxy.$refs.slogan.style.color = "red"
    })

输出

<p class="slogan" data-v-22f9f125="">「让创意动起来 世界在你手中」</p>

3、还有一种就是原生

document.getElementById('video')
document.getElementsByClassName('slogan')