Vue3 Ref获取真实DOM学习实战
更新时间：2023年06月14日 10:00:39 作者：天問
这篇文章主要为大家介绍了Vue3 Ref获取真实DOM学习实战示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
正文
在使用 Vue 、React 等MVVM框架开发项目时，基本上很少需要直接手动去操作 DOM 了，但是也不可避免，例如获取元素的宽高、元素在屏幕的XY位置、DIV拖拽等等。随着 Vue 版本的升级，在 Vue3 中获取真实DOM的方法也有了变化。
Vue3 && DOM
一、前言
ref()：用于注册元素或子组件的引用。接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。
二、ref获取真实DOM
- 在选项式 API 中
<template>
<!-- 普通元素 -->
<div ref='eleBox' class='box'></div>
<!-- 子组件 -->
<ChildComponent ref='childCom' />
</template>
<script>
export default {
components: {
ChildComponent,
},
mounted() {
let eleBox = this.$refs.eleBox
// eleBox 就是获取的真实DOM对象，可以进行DOM相关的操作
eleBox.style.backgroundColor = '#f0f'
// 获取子组件实例
console.log(this.$refs.childCom)
}
}
</script>- 在组合式 API 中
<!-- 普通元素 -->
<div ref='eleBox' class='box'></div>
<!-- 子组件 -->
<ChildComponent :ref="(el) => childCom = el" />
<script setup>
import { ref } from 'vue'
let eleBox = ref()
// eleBox.value 就是获取的真实DOM对象
eleBox.value.style.width = '200px'
let childCom = ref()
// childCom.value 就是获取的子组件实例对象
</script>以上就是Vue3 Ref获取真实DOM学习实战的详细内容，更多关于Vue3 Ref获取真实DOM的资料请关注脚本之家其它相关文章！
相关文章
Vue的响应式原理是Vue最核心的特性之一，也是Vue能够为开发者提供高效便捷的开发体验的重要原因之一，这篇文章主要介绍了响应式的原理及其实现方式，需要详细了解可以参考下文2023-05-05
这篇文章主要介绍了vue如何解决多个异步请求问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了使用 vue 实例更好的监听事件及vue实例的方法,介绍了一种新增 vue 实例的方法，单独监听事件，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要介绍了Vue-ANTD表单输入中自定义校验一些正则表达式规则介绍,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
Vue2.0+ElementUI+PageHelper实现的表格分页功能
ElementUI也是一套很不错的组件库，对于我们经常用到的表格、表单、时间日期选择器等常用组件都有着很好的封装和接口。这篇文章主要介绍了Vue2.0+ElementUI+PageHelper实现的表格分页,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue中如何去掉input前后的空格问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue如何实现多组关键词对应高亮显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要给大家介绍了关于Vue3项目中引入html页面的相关资料,Vue3是一个JavaScript框架,通常我们使用它来构建单页应用程序(SPA),如果你想在HTML页面中使用Vue3,可以参考这篇文章,需要的朋友可以参考下2023-09-09
这篇文章主要给大家介绍了关于element-ui表格如何自适应高度的相关资料,Element UI的Table组件默认情况下是没有自适应高度的,文中给大家介绍了解决的办法,需要的朋友可以参考下2023-08-08
最新评论