开发者笔记

Vue3学习与实战 · Ref获取真实DOM

字数：356 阅读时长：1分钟 阅读：85

在使用 Vue 、React 等MVVM框架开发项目时，基本上很少需要直接手动去操作 DOM 了，但是也不可避免，例如获取元素的宽高、元素在屏幕的XY位置、DIV拖拽等等。随着 Vue 版本的升级，在 Vue3 中获取真实DOM的方法也有了变化。

Vue3 && DOM

一、前言

ref()：用于注册元素或子组件的引用。接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

二、ref获取真实DOM

  • 在选项式 API 中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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 中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 普通元素 -->
<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>

欢迎访问：天问博客

本文作者： Tiven
发布时间： 2022-10-19
最后更新： 2023-03-02
本文标题： Vue3学习与实战 · Ref获取真实DOM
本文链接： https://www.tiven.cn/p/4c07e342/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！
欢迎留言，提问 ^_^