ref在Vue2、Vue3中的使用


前言

记录一下ref在Vue2与Vue3中的使用,ref可以获取DOM元素,也可以获取子组件的数据、方法。


一、ref在Vue2中的用法

给元素绑定一个ref,然后在js中通过this.$refs获取DOM。
ref命名是随意的哦~
注意:要在mounted生命周期中获取DOM
也可以利用nextTick获取更新的DOM内容。
比如:我们需要在created生命周期中进行一些DOM操作的时候,就一定要把相关的代码逻辑写在nextTick中。或者在数据变化的时候,我们想执行某个动作,而这个动作需要使用随数据变化而改变的DOM结构的时候,也需要写在nextTick中。
下面的代码,在created生命周期是获取不到DOM的,在created中加入了nextTick就可以获取到DOM;在mounted生命周期中可以获取到DOM。
在这里插入图片描述

二、ref在Vue3中的用法

在Vue3中,setup中是没有this的,那么就不能再像Vue2中操作ref。
在Vue3中,需要在onMounted生命周期中获取DOM。
在这里插入图片描述
效果如下:
在这里插入图片描述
利用nextTick也可以获取到DOM元素:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_52043522/article/details/130409578