Vue3--ref使用(解决ref无法获取dom元素的问题)
众所周知在vue2中,ref主要的作用还是便于快速的获取dom元素或组件,因为ref操作相比document.getElementbyId会减少dom操作的节点消耗。
具体关于vue2中ref和$refs的使用,这篇文章写的十分全面:
https://www.cnblogs.com/xumqfaith/p/7743387.html
本文还是针对Vue3中ref使用进行说明,重点是模板ref的使用。
1. ref用法1:基本类型封装,使数据响应式
vue3中为了节约资源,并不是全部数据都会进行响应式监听。他允许用户进行动态监听。
因此在vue3中主要用reactive和ref进行响应数据的监听。他俩的区别在于:
①reactive中必须存放对象(json、数组等),不能存放基本数据类型
②ref则可以存放基本数据类型【注:ref本质还是reactive】
举例:
let a=reactive({a:5});
let b=ref(5);
详细使用请参考官方文档!
Vue3中文文档
2.ref用法2:模板ref,获取dom元素节点(重点)
①const a=ref(null);
②在template中定义ref
*********③setup中获取对应节点【在
onMounted
里】;④将a return出去;
但是这时候你可能会发现,你无法获取这个节点。例如下面的代码段,你无法获取video节点。
<!-- videocontainer -->
<template><div class="video-container"><video :src="props.src" ref="V1" style='top:0px' loop playsinline muted></video></div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import {onMounted,ref} from 'vue';
export default {props:['src'],setup(props,context){const V1=ref(null);console.log('节点',V1.value);return{props,V1,}
})
</script>
浏览器显示结果:
这是什么原因呢?
其实还是生命周期的问题,结合官方文档可知:原来的created没有了,setup充当了原来的created。
Vue3生命周期钩子
所以在setup的时候,dom元素还没有被创建,一切都处于混沌状态,只有setup完毕了HTML才能完整构建,才能真正访问到value值,所以自然无法获取到dom节点,要想解决这个问题,就要配合钩子函数,在dom挂载完毕后再进行获取,更改上述代码后如下:
<!-- videocontainer -->
<template><div class="video-container"><video :src="props.src" ref="V1" style='top:0px' loop playsinline muted></video></div>
</template><script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import {onMounted,ref} from 'vue';
export default {props:['src'],setup(props,context){const V1=ref(null);onMounted(()=>{console.log(V1.value);})return{props,V1,}},
}
</script>
结果如下: 可以获取到dom元素了。
3.总结:
通过本文主要解决两个问题:一是在vue3中如何用模板ref获取dom元素,二是解决获取不到节点的问题。欢迎大佬们留言补充指正。
Vue3--ref使用(解决ref无法获取dom元素的问题)相关推荐
- ref 引用(vue获取DOM元素)
ref 引用 jquery 牛逼 简化了程序员操作DOM的过程 vue 优势: MVVM 在 vue 中,程序员不需要操作DOM.只需要把数据维护好!(数据驱动视图) 结论:在 vue 项目,强烈不建 ...
- VUE3.X——获取dom元素
在Vue2.X中,我们可以通过 this.$refs.XXX 来获取dom元素,但在Vue3.X中,$refs 被删除,而 setup() 函数的执行时间是在 beforeCreate 之前,这意味着 ...
- Vue.js实例学习:获取DOM元素
一.获取DOM元素 在Vue中获取DOM元素,我们可以用ref. 用法(和React一样): (1)在组件的DOM部分,任意标签中 写上:ref="xxx" (2)通过组件对象 t ...
- vue 获取id元素,vue.js怎么获取dom元素?
vue.js怎么获取dom元素?下面本篇文章给大家介绍一下vue.js获取dom元素的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 使用Vue.js获取dom元素 标签中添加 ...
- vue如何获取div的宽度_vue获取dom元素高度的方法
获取DOM高度: 要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作(参照生命周期钩子mounted语法:https://cn.vuejs.org/v2/api/#mo ...
- Vue.js中$refs{}获取DOM元素
如果我们想获取DOM元素,一般使用js中的document.querySelector来获取这个dom节点,然后在获取元素的值,现在Vue提供给我们一种更便捷的方式来获取DOM元素-----$refs ...
- vue中动态获取dom元素进行操作
这几天我远程面试了一家公司,期间问题我都回答上来了 但有一个问题我很纳闷 就是你说下vue中获取dom元素的方法吧 我说大体上俩中吧 1.vue中 ref的方法 给元素起一个ref名称 通过 th ...
- Vue中获取dom元素的宽高
vue中获取dom元素的宽高 template模板中给dom绑定ref: <el-carouselid="ailabelmap"ref="remarkCarusel ...
- vue 获取dom子元素_vue获取dom元素注意事项
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...
最新文章
- 给同一个按钮添加单双击事件
- 《Android传感器开发与智能设备案例实战》——第2章,第2.4节安装ADT
- 从体验出发构建以增长为目标的视频服务体系
- codeforces1498 D. Bananas in a Microwave(背包+优化)
- PAT 甲级 1004
- linux源码Makefile详解(完整)-转
- ❤️《大前端—了解与使用NodesJS》
- DataGrid添加滚动条
- python爬虫实战之爬取QQ音乐
- Windows中的用户和组以及用户密码处理
- 数据库:delete语句
- 用matlab绘制函数图像
- 红帽的RHCSA、RHCE、RHCA值得报考吗?
- 测试网速_搭建Web SpeedTest网速测试工具
- 浅谈程序员接私单那点事及接私单需要注意的问题
- 2016-2019 书单
- 【程序人生】机灵鹤六月份的月度总结
- php获取蓝凑云文件列表,自制蓝奏云网盘解析接口全解
- 软件测试需要具备的技能(软技能硬技能)
- noip 2009 靶形数独
热门文章
- 计算机DQ,dq物理攻击伤害计算 与输出方式比较
- js中对字符串进行分割截取的方法
- html从入门到精通前锋,街篮新手攻略 从入门到精通的心得分享终结篇
- 全文检索工具elasticsearch:第三章: Java程序中的应用
- 关于盒马鲜生带来的绿色农产品销售方式的构想
- 云栖科技评论第38期:亚马逊推出时尚智能助手Echo Look
- accessToken refreshToken简单使用源码demo,双token刷新及有效时间设置
- 深度卷积生成对抗网络DCGAN之实现动漫头像的生成(基于keras Tensorflow2.0实现)
- 在线文件批量重命名工具
- ConcurrentHashMap