Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明
更新时间：2023年03月24日 11:22:25 作者：咲奈
这篇文章主要介绍了Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue 2
在 vue 2 中，如果给 v-for 绑定一个 ref ，通过这个 ref 可以获取到全部 v-for 的节点。
HTML
<div id='app'>
<div>
<p v-for="item in renderData" :key="item.name" ref="nodes">{{item.name}}</p>
</div>
</div>
JS
data() {
return {
renderData: [
{ name: 'a' },
{ name: 'b' },
{ name: 'c' },
{ name: 'd' },
{ name: 'f' }
]
}
},
mounted() {
console.log(this.$refs.nodes)
}
从而可以获得所有 v-for 的节点数组：
所以你可以在自定义触发事件中将索引传入，就可以在 this.$refs.nodes[index] 中获取触发事件的那个 dom 。
Vue 3
在 vue 3 中，对 v-for 的一体化（数组化）处理已经取消，变为函数处理 ref 。
如果你像 vue 2 中绑定：
<div>
<p v-for="item in renderData" :key="item.name" ref="nodes">{{item.name}}</p>
</div>
此时通过 this.$refs.nodes 只能获取遍历的最后一个节点 dom 。
如果要实现 vue 2 相同的数组，你可以对 ref 进行自定义处理：
HTML
<div>
<p v-for="item in renderData" :key="item.name" ref="handleNodes">{{item.name}}</p>
</div>
JS
data() {
return {
nodes: []
}
},
methods: {
handleNodes(el) {
this.nodes.push(el)
}
}
也就是说 ref 的处理方式变为了函数，这个函数默认传入该节点。
当然，如果你不在 v-for 上使用，只是单纯的加入单个 ref ，使用方法和 vue 2 没有任何区别。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue指令与$nextTick 操作DOM的不同之处,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
Vue3已经稳定了相当长一段时间了。许多代码库都在生产环境中使用它，其他人最终都将不得不迁移到Vue3。我现在有机会使用它并记录了我的错误，下面这些错误你可能想要避免2023-03-03
这篇文章主要介绍了Vuejs第九篇之组件作用域及props数据传递实例详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了简单设置el-date-picker的默认当前时间问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了vue实现web在线聊天功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了vue如何监听页面缓存事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
Ant Design Vue 走马灯实现单页多张图片轮播效果
这篇文章主要介绍了Ant Design Vue 走马灯实现单页多张图片轮播,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了Vue实现裁切图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）
这篇文章主要介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）的相关资料,需要的朋友可以参考下2017-01-01
代码优化不仅仅局限在业务逻辑这块，像是代码复用、效率等等都是我们可以加以改进的地方，这篇文章主要给大家介绍了关于Vue项目优化的一些实战策略，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
最新评论