vue3如何通过ref属性获取元素
作者:互联网
在vue2.x
中,可以通过给元素添加ref='xxx'
属性,然后在代码中通过this.$refs.xxx
获取到对应的元素
然而在vue3
中时没有$refs
这个东西的,因此vue3
中通过ref
属性获取元素就不能按照vue2
的方式来获取
vue3
需要借助生命周期方法,原因很简单,在setup
执行时,template
中的元素还没挂载到页面上,所以必须在mounted
之后才能获取到元素。
<script> import { onMounted, ref } from 'vue' /* ref获取元素: 利用ref函数获取组件中的标签元素 功能需求: 让输入框自动获取焦点 */ export default { setup() { const inputRef = ref(null) onMounted(() => { console.log(inputRef.value) inputRef.value && inputRef.value.focus() }) return { inputRef } }, } </script> 如上代码,
vue3
中,所有生命周期方法都抽离出去了,需要用时直接import
。这里导入了一个onMounted
当界面挂载出来的时候,就会自动执行
onMounted
的回调函数,里头就可以获取到dom元素
pc上是可以正常输出的
如果在uniapp是为空,拿不到的; 用于父组件调用子组件的方法(是起作用的) 查看: https://www.cnblogs.com/yuzhongyu/p/14076777.html
标签:inputRef,元素,onMounted,获取,vue3,ref,属性 来源: https://www.cnblogs.com/xqschool/p/16101437.html