vue3如何通过ref属性获取元素
在vue2.x
中,可以通过给元素添加ref='xxx'
属性,然后在代码中通过this.$refs.xxx
获取到对应的元素
然而在vue3
中时没有$refs
这个东西的,因此vue3
中通过ref
属性获取元素就不能按照vue2
的方式来获取
vue3
需要借助生命周期方法,原因很简单,在setup
执行时,template
中的元素还没挂载到页面上,所以必须在mounted
之后才能获取到元素。
I am DIV
如上代码,vue3
中,所有生命周期方法都抽离出去了,需要用时直接import
。这里导入了一个onMounted
当界面挂载出来的时候,就会自动执行onMounted
的回调函数,里头就可以获取到dom元素
小结
1.在compositionAPI中如何使用生命周期函数?
需要用到哪个生命周期函数,就将对应函数的import进来,接着在setup中调用即可
2.vue3如何通过ref属性获取界面上的元素?
在template中的写法跟vue2一样,给元素添加个ref='xxx'
在setup中,先创建一个响应式数据,并且要把响应式数据暴露出去
当元素被创建出来的适合,就会给对应的响应数据赋值
当响应式数据被赋值之后,就可以利用生命周期方法,在生命周期方法中获取对应的响应式数据,即DOM元素
以上就是vue3如何通过ref属性获取元素基本过程!