vue3如何使用ref获取元素
更新时间：2022年05月24日 09:35:03 作者：只会cv的小前端
这篇文章主要介绍了vue3如何使用ref获取元素，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue3使用ref获取元素
在vue2.x中，可以通过给元素添加ref='xxx'属性，然后在代码中通过this.$refs.xxx获取到对应的元素
然而在vue3中时没有$refs这个东西的，因此vue3中通过ref属性获取元素就不能按照vue2的方式来获取
vue3需要借助生命周期方法，原因很简单，在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后才能获取到元素。
<template>
<div ref='box'>I am DIV</div>
</template>
<script>
import {ref,onMounted}
export default{
setup(){
let box = ref(null);
onMounted(()=>{
console.log(box.value)
});
return {box}
}
}
</script>vue3中ref的理解
1.什么是ref?
ref和reactive一样,也是用来实现响应式数据的方法
由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦
所以Vue3提供了ref方法实现简单值得监听
2.ref本质
ref底层其实还是reactive,所以当运行时系统会自动根据传入的ref转换成reactive.
3.ref注意点
在vue中使用ref的值不用通过value获取
在js中使用ref的值必须通过value获取
4.ref获取元素
在vue2中我们可以通过给元素添加ref=‘xxx’,然后在代码中通过refs.xxx的方式来获取元素,在vue3中也可以通过ref来获取元素.
但不是像以下这种熟悉的方式,因为在vue3中没有$和refs这些东西.
错误示范
正确写法
<template> <div> <div ref="box">我是div</div> </div> </template>
<script>
import { ref,onMounted } from "vue";
export default {
setup() {
let box = ref(null); //本质是reactive({value:null})
// 需要在生命周期获取
onMounted(()=>{
// 当界面挂载出来后就会自动执行
console.log(box.value);
})
//接受的是null,原因是setup执行时机比mounted早,dom还没形成
console.log(box.value);
return { box };
},
};
</script>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中的生命周期及钩子函数,Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染,下面文章详细介绍,需要的朋友可以参考一下2021-12-12
这篇文章主要介绍了vue事件处理原理及过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03
今天小编就为大家分享一篇Vue表单及表单绑定方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
用element的upload组件实现多图片上传和压缩的示例代码
这篇文章主要介绍了用element的upload组件实现多图片上传和压缩的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要介绍了vue子页面控制父页面刷新问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
今天小编就为大家分享一篇vue之组件内监控$store中定义变量的变化详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Vue3全局属性app.config.globalProperties的实现
Vue3中的app.config.globalProperties是一个强大的全局配置功能,允许我们在应用级别设置和访问属性,本文主要介绍了Vue3全局属性app.config.globalProperties的实现,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
本文通过实例代码给大家介绍了Vue lazyload图片懒加载的相关知识，通过导入配置等操作src/main.jswenj ,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-12-12
这篇文章主要介绍了vue技术分享-你可能不知道的7个秘密,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue3.0 加载json的方法（非ajax），帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-10-10
最新评论