vue3如何获取绑定页面dom元素
更新时间：2023年11月15日 10:19:26 作者：梦落飞雪
这篇文章主要介绍了vue3如何获取绑定页面dom元素问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3获取绑定页面dom元素
和vue2一样，vue3也可以在页面上通过ref绑定一个变量，
<div ref="domRef"></div>
但vue2使用this.$refs可以获取绑定的变量，而vue3虽然已经删除了this，但可以用以下方法绑定元素
在setup方法中使用vue提供的ref绑定元素，网上大部分是使用
import { onMounted, ref } from "vue";
export default{
setup() {
const domRef = ref(null)
onMounted(() => {
console.log(domRef.value)
})
retrurn {
domRef
}
}
}其实这还有优化的空间，我们使用vue3比较重要的是使用ts语法，那么怎么指定ref绑定的dom的class对象呢，
我们可以不用在ref中写null，在ref中指定某个类的原型，那么value就是这个类的对象，
我们可以使用js本身就有的Element对象，也可以自定义一个，
最终代码如下所示：
① Ele.ts文件
用于声明class类局部使用，也可以使用.d.ts文件直接全局声明
export default class Ele {
// eslint-disable-next-line @typescript-eslint/no-empty-function
constructor() {}
clientHeight!: number;
clientWidth!: number;
style!: {
top: number | string;
left: number | string;
bottom: number | string;
right: number | string;
display: "inline-block" | "none";
};
}② 通过Ele绑定ref
import { onMounted, ref } from "vue";
import Ele from "@/class/Ele";
export default{
setup() {
const domRef = ref(Ele.prototype)
onMounted(() => {
const dom: Ele = domRef.value;
console.log(dom)
})
retrurn {
domRef
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3+vite路由配置优化(自动化导入),需要的朋友可以参考下2023-09-09
本文主要介绍了Vite图片资源打包优化的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能
支付功能在我们日常开发中经常会遇到,下面这篇文章主要给大家介绍了关于uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue表单验证之禁止input输入框输入空格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
本篇文章主要介绍了vue项目中用cdn优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
本篇文章主要介绍了详解用vue编写弹出框组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Vue如何更改表格中的某一行选项值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理,这篇文章主要给大家介绍了关于Vue中created与mounted区别的相关资料,其中部分知识点可能是我们日常工作会见到或用到的,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vuex的使用和简易实现，帮助大家更好的理解和使用vuex，感兴趣的朋友可以了解下2021-01-01
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。这篇文章主要介绍了Vue的H5页面唤起支付宝支付,需要的朋友可以参考下2019-04-04
最新评论