在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>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66303.html
