在vue2.x中:
<div ref="dom"></div>
this.$refs.dom即可获取到div的dom节点
但在vue3.x中不能通过this.$refs获取。正确获取的方式如下:
<div ref="dom"></div>
setup(){
const dom = ref(null);
onMounted(()=>{
console.log(dom.value); //vue3获取ref的dom节点
})
return {
dom
}
}
当需要动态渲染dom节点,通过v-for动态生成ref。代码如下:
<template>
<div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
{{ item }}
</div>
</template>
<script>
import { ref, reactive, onBeforeUpdate } from 'vue'
export default {
setup() {
const list = reactive([1, 2, 3])
const divs = ref([])
// 确保在每次更新之前重置ref
onBeforeUpdate(() => {
divs.value = []
})
return {
list,
divs
}
}
}
</script>