前言
vue3 和 vue2 使用起来还是有一定区别,下面就分别介绍下两者如何通过 ref 获取 DOM。
vue2 获取 DOM
在 template 中用 ref 标记
<p ref="myP">我是p标签</p>
js 中直接通过 this.$refs
即可获取 DOM
console.log(this.$refs.myP)
vue3 获取 DOM
在 template 中用 ref 标记
<p ref="myP">我是p标签</p>
ts 中借助 ref
来获取 DOM
<script lang="ts">
import {defineComponent, ref, onMounted} from 'vue';
export default defineComponent({
name: '',
setup() {
const myP = ref() // 必须同名
onMounted(() => {
console.log(myP.value) // 输出 DOM
})
return {
myP
}
}
})
</script>