vue3如何通过ref属性获取元素

vue2.x中,可以通过给元素添加ref='xxx'属性,然后在代码中通过this.$refs.xxx获取到对应的元素

然而在vue3中时没有$refs这个东西的,因此vue3中通过ref属性获取元素就不能按照vue2的方式来获取
vue3需要借助生命周期方法,原因很简单,在setup执行时,template中的元素还没挂载到页面上,所以必须在mounted之后才能获取到元素。



如上代码,vue3中,所有生命周期方法都抽离出去了,需要用时直接import。这里导入了一个onMounted
当界面挂载出来的时候,就会自动执行onMounted的回调函数,里头就可以获取到dom元素

小结
1.在compositionAPI中如何使用生命周期函数?
需要用到哪个生命周期函数,就将对应函数的import进来,接着在setup中调用即可
2.vue3如何通过ref属性获取界面上的元素?
在template中的写法跟vue2一样,给元素添加个ref='xxx'
在setup中,先创建一个响应式数据,并且要把响应式数据暴露出去
当元素被创建出来的适合,就会给对应的响应数据赋值
当响应式数据被赋值之后,就可以利用生命周期方法,在生命周期方法中获取对应的响应式数据,即DOM元素

以上就是vue3如何通过ref属性获取元素基本过程!

You may also like...