在vue2.x中普碎,可以通過給元素添加ref='xxx'屬性誓沸,然后在代碼中通過this.$refs.xxx獲取到對應(yīng)的元素
然而在vue3中時沒有$refs這個東西的诸迟,因此vue3中通過ref屬性獲取元素就不能按照vue2的方式來獲取
vue3需要借助生命周期方法否副,原因很簡單汉矿,在setup執(zhí)行時,template中的元素還沒掛載到頁面上备禀,所以必須在mounted之后才能獲取到元素洲拇。
<template>
<div ref='box'>I am DIV</div>
</template>
<script>
import {ref,onMounted}
export default{
setup(){
let box = ref(null);
onMounted(()=>{
console.log(box.value)
});
return {box}
}
}
</script>
如果一個元素ref(ElForm)元素,可以套一個父級div來拿取它的寬高,
也可以給它一個id曲尸,再通過document.getElementById('queryForm').clientHeight來獲取它的高度