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
        }
    }
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue实现超过两行显示展开收起的代码
这篇文章主要介绍了vue实现超过两行显示展开收起的代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue中 axios delete请求参数操作
这篇文章主要介绍了Vue中 axios delete请求参数操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
关于row-click和current-change的用法及说明
文章介绍了row-click和current-change事件的使用,并详细描述了在表格联动需求下,仅使用row-click时遇到的问题及解决方案,最终得出结论,current-change事件在行数据或行焦点改变时均会触发,更适合用于表格联动需求
2026-04-04
在vue项目中promise解决回调地狱和并发请求的问题
这篇文章主要介绍了在vue项目中promise解决回调地狱和并发请求的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue中回调函数(callback)的用法举例
这篇文章主要给大家介绍了关于vue中回调函数(callback)的用法举例,所谓的回调函数,就是由调用函数提供执行代码,被调用函数执行完毕之后,再自动执行的一个函数,需要的朋友可以参考下
2023-08-08
如何封装一个类似微信通讯录带有字母检索功能的vue组件
这篇文章主要介绍了如何封装一个类似微信通讯录带有字母检索功能的vue组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
vue-antd form组件封装全过程
这篇文章主要介绍了vue-antd form组件封装全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue2实现封装动态表单组件
这篇文章主要介绍了vue2实现封装动态表单组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-08-08
element-ui中Table表格省市区合并单元格的方法实现
这篇文章主要介绍了element-ui中Table表格省市区合并单元格的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
详解Vue.js3.0 组件是如何渲染为DOM的
这篇文章主要介绍了详解Vue.js3.0 组件是如何渲染为DOM的，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11